Scroll Velocity Detection Unleash the power of Scroll-Driven Animations (910) (Дата оригинальной публикации: )

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 → Demo: BADASS → Article: [id5144984|@property] → Demo: Scroll Velocity POC: Step 0 → Demo: Scroll Velocity POC: Step 1 → Demo: Scroll Velocity POC: Step 2 → Demo: Scroll Velocity POC: Step 3 → Article: abs() and sign() polyfill → Demo: Tilted Boxes → Demo: Motion Blur Scrolling → Article: Style Queries → Demo: Moving Bars → Demo: Chicky Scroll → Demo: LERP Reading Indicator → Check out more Scroll-Driven Animations Demos → Watch more Unleash the Power of Scroll-Driven Animations → Subscribe to Chrome for Developers → #CSS #ScrollDrivenAnimations #Animation #chrome Speaker: Bramus Van Damme