Add Scroll Shadows to a Scroll Container | Unleash the power of Scroll-Driven Animations (6/10)

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

In this sixth episode of “Unleash the Power of Scroll-Driven Animations”, show host Bramus teaches you how to add dynamic scroll shadow indicators to visually signal scrollable content.

These indicators appear and disappear as you scroll, and are only injected if the box can actually scroll. This “can scroll” detection is also done using Scroll-Driven Animations,

Chapters:
0:00 - Intro
0:45 - Injecting the shadows
0:57 - Animating the shadows
2:27 - Detecting if an element can scroll or not
3:42 - Outro

Resources:
Demo: Scroll Shadows (CSS) → goo.gle/4dheiWY
Article: Space Toggle → goo.gle/space-toggle

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