Scroll Velocity Detection | Unleash the power of Scroll-Driven Animations (9/10)

Опубликовано 3 мая 2024, 16:01

In this ninth episode of “Unleash the Power of Scroll-Driven Animations”, show host Bramus goes full experimental and uses Scroll-Driven Animations to detect the active scroll speed and the directionality of scroll.

Detecting this allows you to style an element based on whether the user is scrolling (or not scrolling), the direction they are scrolling in, and the speed they are scrolling with … and this all using only CSS.

Chapters:
0:00 - Intro
0:47 - Warning: this is a hack
1:02 - Step 0: Two Custom Properties
1:44 - Step 1: Delaying one of the Custom Properties
2:21 - Step 2: Calculating the Velocity
3:40 - Step 3: Calculating the Direction and Speed
4:46 - Demo: Tilted Boxes
5:18 - Demo: Motion Blur Scroll
5:52 - Using Style Queries
6:15 - Detecting more scroll states
7:59 - Outro

Resources:
Article: Style an element based on the active Scroll Direction and Scroll Speed → goo.gle/3JxUAsm
Demo: BADASS → goo.gle/3UKQweR
Article: @property → goo.gle/at-property
Demo: Scroll Velocity POC: Step 0 → goo.gle/3y4EWSw
Demo: Scroll Velocity POC: Step 1 → goo.gle/49VgHUl
Demo: Scroll Velocity POC: Step 2 → goo.gle/4bf9JL4
Demo: Scroll Velocity POC: Step 3 → goo.gle/49UudHF
Article: abs() and sign() polyfill → goo.gle/abs-sign-polyfill
Demo: Tilted Boxes → goo.gle/3JDYik0
Demo: Motion Blur Scrolling → goo.gle/3UCzCyV
Article: Style Queries → goo.gle/style-queries
Demo: Moving Bars → goo.gle/3UxnmPY
Demo: Chicky Scroll → goo.gle/4aRR3kG
Demo: LERP Reading Indicator → goo.gle/3WhUkoJ

Check out more Scroll-Driven Animations Demos → goo.gle/scroll-driven-animatio...

Watch more Unleash the Power of Scroll-Driven Animations → goo.gle/SDA
Subscribe to Chrome for Developers → goo.gle/ChromeDevs

#CSS #ScrollDrivenAnimations #Animation #chrome

Speaker: Bramus Van Damme