CSS: Scrolling and Parallax

CSS: Scrolling and Parallax

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 3h 23m | 579 MB

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.

+ Table of Contents

1 Why are scrolling animations useful
2 Using the exercises for this course

Simple Scrolling with CSS
3 Positioning
4 Pseudo classes and elements
5 Display and flexbox
6 Background properties
7 Adding a background image
8 Alternative background properties

Creating CSS Animations
9 Working with the transform property
10 Using transform properties
11 Understanding transitions
12 Using transitions to animate
13 The animation property
14 Creating keyframes for animation
15 Magic keyframes
16 Sequencing animations

Scroll-Based Animation
17 Building your new monsters section
18 Smooth scrolling on link clicks
19 Request animation frame
20 Adding classes when scrolling
21 Removing the header cue when scrolling
22 Parallax scrolling with JavaScript
23 Determining when an object first appears
24 Animating when objects enter the screen
25 Randomizing the appearance

Using ScrollMagic
26 Adding final HTML for animation
27 Downloading and installing ScrollMagic
28 Toggling classes
29 Configuring your scenes

Tweening with GSAP
30 Installing GSAP
31 Adding a GSAP tween
32 Easing tweens with GSAP
33 Controlling animations with scroll
34 Pinning elements

Putting It All Together
35 Animating the parachute
36 Adding a staggered GSAP tween

37 Next steps