CSS: Scrolling and Parallax
3h 31mIntermediate2022-11-09
Authors
Ray Villalobos
Senior Staff Instructor at LinkedIn Learning
Course details
Scrolling used to be really basic—up and down, and occasionally side to side. Now scrolling has taken a larger place in navigation, and CSS lets you connect animations to scrolling, resulting in new interaction opportunities. This course shows how web developers and app developers can leverage scrolling and parallax to program new interface styles. Ray Villalobos demonstrates how to customize CSS for scrolling behaviors, create CSS animations, create scroll-based animations, use ScrollMagic, tween, and use the GreenSock Animation Platform (GSAP). He covers pseudo classes, elements, using transform properties, sequencing, parallax with JavaScript, and more.
Skills covered
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
Concepts
0. Introduction
- 01 - Why are scrolling animations useful
- 02 - Using the exercises for this course
- 03 - Using GitHub Codespaces with this course
1. Simple Scrolling with CSS
- 04 - Positioning
- 05 - Pseudo classes and elements
- 06 - Display and flexbox
- 07 - Background properties
- 08 - Adding a background image
- 09 - Alternative background properties
2. Creating CSS Animations
- 10 - Working with the transform property
- 11 - Using transform properties
- 12 - Understanding transitions
- 13 - Using transitions to animate
- 14 - The animation property
- 15 - Creating keyframes for animation
- 16 - Magic keyframes
- 17 - Sequencing animations
3. Scroll-Based Animation
- 18 - Building your new monsters section
- 19 - Smooth scrolling on link clicks
- 20 - Request animation frame
- 21 - Adding classes when scrolling
- 22 - Removing the header cue when scrolling
- 23 - Parallax scrolling with JavaScript
- 24 - Determining when an object first appears
- 25 - Animating when objects enter the screen
- 26 - Randomizing the appearance
4. Using ScrollMagic
- 27 - Adding final HTML for animation
- 28 - Downloading and installing ScrollMagic
- 29 - Toggling classes
- 30 - Configuring your scenes
5. Tweening with GSAP
- 31 - Installing GSAP
- 32 - Adding a GSAP tween
- 33 - Easing tweens with GSAP
- 34 - Controlling animations with scroll
- 35 - Pinning elements
6. Putting It All Together
- 36 - Animating the parachute
- 37 - Adding a staggered GSAP tween
Conclusion
- 38 - Next steps