There are currently no items in your shopping cart.

User Panel

Forgot your password?.

lynda CSS: Scrolling and Parallax

Video Introducing this tutorial

Why are scrolling animations useful?
Using the exercises for this course

1. Simple Scrolling with CSS:
Pseudo classes and elements
Display and flexbox
Background properties
Adding a background image
Alternative background properties

2. Creating CSS Animations:
Working with the transform property
Using transform properties
Understanding transitions
Using transitions to animate
The animation property
Creating keyframes for animation
Magic keyframes
Sequencing animations

3. Scroll-Based Animation:
Building your new monsters section
Smooth scrolling on link clicks
Request animation frame
Adding classes when scrolling
Removing the header cue when scrolling
Parallax scrolling with JavaScript
Determining when an object first appears
Animating when objects enter the screen
Randomizing the appearance

4. Using ScrollMagic:
Adding final HTML for animation
Downloading and installing ScrollMagic
Toggling classes
Configuring your scenes

5. Tweening with GSAP:
Installing GSAP
Adding a GSAP tween
Easing tweens with GSAP
Controlling animations with scroll
Pinning elements

6. Putting It All Together:
Animating the parachute
Adding a staggered GSAP tween

Next steps