강의

멘토링

커뮤니티

Programming

/

Web Development

Create your creative web: Parallax ScrollTrigger Master Class

Many websites are using Parallax ScrollTrigger to create cool effects. Let’s use this library to create creative and impressive web pages.

(5.0) 3 reviews

34 learners

  • webstoryboy
포트폴리오
gsap
parallax
scrolltrigger
Portfolio
JavaScript

Reviews from Early Learners

What you will learn!

  • Parallax Effect

  • Javascript Basic

  • GSAP Animation

  • GSAP ScrollTrigger

Want to create a great interactive web?
Easy and convenient GSAP Parallax ScrollTrigger!

Smooth animations on the web
GSAP Parallax ScrollTrigger

💡 Preview example animation >> (click)

Hello! This is Webstoryboy.
This video covers GSAP's powerful plugin, Parallax ScrollTrigger . It's a beginner-friendly video with 15 examples. This video begins by explaining what Parallax ScrollTrigger is and then explains in detail how it works.

And we'll walk through some examples of how to actually apply it to your portfolio . Various websites are using the Parallax ScrollTrigger to create stunning effects.

Why Parallax ScrollTrigger?

You can use various elements such as images, backgrounds, and text to move the screen or implement smooth animations .

✅ It is easy to use and offers various customization options, making it highly convenient and useful.

You can use it for creative and impressive web page portfolio and development .


To these people
I recommend it.

Anyone interested in front-end development, including web developers

Developers who want to make their portfolio dynamic and creative

Developers who want to apply ScrollTrigger and Parallax features to real projects

Four key benefits of this course

  • 1️⃣ The curriculum is systematically organized so that learners can acquire the content sequentially.
  • 2️⃣ We focus on practical techniques applicable to real-world web development projects.
  • 3️⃣ In the lecture, rather than focusing on theoretical content, you will learn implementation methods through practice and examples.
  • 4️⃣ We have introduced various examples and application cases so that learners can understand the content in various ways.

Q&A 💬

Q. What is Parallax ScrollTrigger?

Parallax ScrollTrigger is a powerful plugin for the GreenSock Animation Platform (GSAP). It uses technology to smoothly control the movement of elements on a web page as they scroll. It allows you to move or animate elements like images, backgrounds, and text in various ways based on scroll position.

Q. What effects can I achieve using Parallax ScrollTrigger?

You can implement a variety of effects on your web pages or portfolios. For example, you can create a three-dimensional effect by smoothly moving images as you scroll, or animate text as it gradually appears or disappears.

Q. What is GSAP?

GSAP (GreenSock Animation Platform) is a library used to implement rich and powerful animation effects in web development. GSAP offers high performance and cross-browser compatibility, along with sequential animation control and detailed customization.

Q. What prerequisite knowledge is required to use GSAP's ScrollTrigger?

You will need a basic understanding of HTML, CSS, JavaScript, and basic GSAP usage.

Q. What kind of effects do the examples provided in the lecture demonstrate?

The lecture will show you various effects such as Pin animation, image effects, text effects, background effects, scale adjustment, landscape mode, portrait/landscape mode, etc.

Q. Where can I apply what I learn in class?

What you learn in this course can be applied to a variety of projects. Whether it's a portfolio, detail page, or event page, animation effects will enhance your users' experience.

Q. Are there any considerations when implementing a web page using Parallax ScrollTrigger?

Parallax effects can be resource-intensive, so performance considerations are important. Use Chrome Developer Tools to check FPS and, if necessary, optimize animations to ensure smooth web page movement.

Recommended for
these people

Who is this course right for?

  • Anyone who wants to create a dynamic portfolio

  • Anyone who wants to create interactive animations

  • Anyone who wants to create a landscape or portrait mode site

  • Anyone who wants to create a portfolio for employment

Need to know before starting?

  • HTML/CSS Basics

  • JavaScript Basics

  • GSAP

  • ScrollTrigger

Hello
This is

126

Learners

7

Reviews

6

Answers

5.0

Rating

4

Courses

나는 공간을 만드는 것을 좋아한다.
어렸을 때부터 나만의 공간을 만드는 것을 좋아했다. 
내가 만든 공간 속에서 누군가가 영감을 받거나 마음을 움직이게 하는 것이 목표다.
코딩은 이런 매력적인 공간을 만들 수 있는 힘이라 생각한다. 
그 한구석에 나만의 꿈을 담아두고, 개발을 하면 살고 싶다.

Curriculum

All

15 lectures ∙ (4hr 35min)

Published: 
Last updated: 

Reviews

All

3 reviews

5.0

3 reviews

  • foxball님의 프로필 이미지
    foxball

    Reviews 33

    Average Rating 4.8

    5

    33% enrolled

    좋은강의 감사합니다.

    • 김강연님의 프로필 이미지
      김강연

      Reviews 1

      Average Rating 5.0

      5

      33% enrolled

      다음 강의도 기다릴게요!!

      • 웹개바르르님의 프로필 이미지
        웹개바르르

        Reviews 16

        Average Rating 5.0

        5

        100% enrolled

        gsap scrollTrigger 국내강의가 없어서 거의 나오자마자 구매 했습니다. 유튜브 외국강사분들꺼 크롬확장프로그램으로 자막 띄워가지고 공부했었는데 자막도 완벽하지않아서 추측하면서 공부해서 좀 부족했었거든요 역시 국내강의가 알아듣기쉽고 좋네요 감사합니다 다음 gsap 이용해서 홈페이지 만드는 강의 나오면 그것도 구매해서 볼게요

        • webstoryboy
          Instructor

          감사합니다. GSAP를 이용한 사이트를 만들기 준비해야겠네요 🥳

      $34.10

      webstoryboy's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!