Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Make your UI smarter with scroll-state()! → With CSS scroll-state() queries, you can easily manage stuck, snapped, and overflowing elements.

ChromiumDev's profile picture

Chrome for Developers

419,872 subscribers

61,080 Aufrufe • vor 1 Jahr •via X (Twitter)

Wissenschaft & TechnologieBildungKunst
LIVE

Anya Rossi• Live Now

Private livecam show

0 Kommentare

Keine Kommentare verfügbar

Kommentare vom Original-Post werden hier angezeigt

Ähnliche Videos

You can enable scroll snapping with CSS scroll-snap-type and scroll-snap-align 🚀
0:12

You can enable scroll snapping with CSS scroll-snap-type and scroll-snap-align 🚀

David Mráz

22,233 Aufrufe • vor 1 Jahr

Every site has a story to scroll 📖 With the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS. Break free from static UI and create your story in minutes. #GoogleIO
0:15

Every site has a story to scroll 📖 With the new Scroll-Triggered Animations, you can transform your site into an immersive narrative that keeps your users engaged. Create beautiful time-based animations with zero JS, all natively in CSS. Break free from static UI and create your story in minutes. #GoogleIO

Chrome for Developers

12,135 Aufrufe • vor 28 Tagen

The Scroll network is now available in Ledger Live! That means you can securely manage your $ETH, $USDT, and $USDC via the Scroll network through the Ledger ecosystem.
0:15

The Scroll network is now available in Ledger Live! That means you can securely manage your $ETH, $USDT, and $USDC via the Scroll network through the Ledger ecosystem.

Ledger

52,162 Aufrufe • vor 1 Jahr

Scroll driven animation with CSS animation-timeline: view(); animation-range: entry, exit;
0:11

Scroll driven animation with CSS animation-timeline: view(); animation-range: entry, exit;

Solarin

20,995 Aufrufe • vor 1 Jahr

Pigment is such a great tool for original colour palettes. Love the infinite scroll and the playful ui elements.
0:11

Pigment is such a great tool for original colour palettes. Love the infinite scroll and the playful ui elements.

David Kirschberg

54,424 Aufrufe • vor 3 Jahren

Scroll-Triggered Animations … with nothing but CSS … oh yeah 🤩 (Blogpost coming soon)
0:14

Scroll-Triggered Animations … with nothing but CSS … oh yeah 🤩 (Blogpost coming soon)

Bramus

10,331 Aufrufe • vor 6 Monaten

Since each detail view is a scroll view, we can easily recreate the same effect by combining scroll geometry and custom scroll target behavior. Result👇
0:18

Since each detail view is a scroll view, we can easily recreate the same effect by combining scroll geometry and custom scroll target behavior. Result👇

Kavsoft

20,540 Aufrufe • vor 4 Monaten

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙
0:17

kinda wild how far you can get with CSS alone a scroll animation tied to the content scroll powers the percentage update + icon animation interpolate-size provides a way to transition the popover between button size and content size using starting-style 🤙

jhey ʕ•ᴥ•ʔ

120,663 Aufrufe • vor 1 Jahr

introducing: text scroll animator component for Framer use this component to animate your text with smooth scroll-triggered effects like blur, rotation, scale, and more! comment "SCROLL" and i’ll send you the component. :)
0:12

introducing: text scroll animator component for Framer use this component to animate your text with smooth scroll-triggered effects like blur, rotation, scale, and more! comment "SCROLL" and i’ll send you the component. :)

Framer University

20,848 Aufrufe • vor 1 Jahr

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉
0:15

Pretty amazing that we can now implement swipeable Tabs with native CSS. Updating the React Aria demo I made a few years ago to use native scroll snapping, scroll timeline, and anchor positioning instead of Framer Motion. Feels smooooooth! 🎉

Devon Govett

83,922 Aufrufe • vor 8 Monaten

You can make elements smoothly animate between pages with just two lines of CSS. No JavaScript needed. Here's how 👇
0:13

You can make elements smoothly animate between pages with just two lines of CSS. No JavaScript needed. Here's how 👇

Victor

22,216 Aufrufe • vor 1 Monat

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔
0:12

Tailwind CSS Tip ✨ You can create a pure css carousel in Tailwind CSS using scroll snap. Live demo ↓ (21/30) follow for 9 more tips 🔔

Surjith S M ✪

203,341 Aufrufe • vor 3 Jahren

wavy carousel with CSS scroll driven animations not exactly like OP but fun to try replicate
0:17

wavy carousel with CSS scroll driven animations not exactly like OP but fun to try replicate

Wes Bos

71,512 Aufrufe • vor 6 Monaten

Slow your scroll and quill with this snuggled puggle 🧡
0:14

Slow your scroll and quill with this snuggled puggle 🧡

San Diego Zoo Wildlife Alliance

37,511 Aufrufe • vor 1 Jahr

Recreating the Nintendo Switch Homescreen scroll UX - 90% done with #CSS - a li'l #JS for sounds, vibrations n' taps
0:17

Recreating the Nintendo Switch Homescreen scroll UX - 90% done with #CSS - a li'l #JS for sounds, vibrations n' taps

Adam Argyle

24,166 Aufrufe • vor 1 Jahr

your modal scrolls. your page scrolls too. that’s scroll chaining. put 𝚘𝚟𝚎𝚛𝚜𝚌𝚛𝚘𝚕𝚕-𝚌𝚘𝚗𝚝𝚊𝚒𝚗 on the scrollable part of the modal and the background won't scroll with your modal
0:15

your modal scrolls. your page scrolls too. that’s scroll chaining. put 𝚘𝚟𝚎𝚛𝚜𝚌𝚛𝚘𝚕𝚕-𝚌𝚘𝚗𝚝𝚊𝚒𝚗 on the scrollable part of the modal and the background won't scroll with your modal

Manu Arora

14,319 Aufrufe • vor 25 Tagen

I put together some Tailwind CSS utilities for masking/fading edges of scroll containers using scroll-driven animations. Link below ↓
0:11

I put together some Tailwind CSS utilities for masking/fading edges of scroll containers using scroll-driven animations. Link below ↓

Tim Wilson

51,213 Aufrufe • vor 29 Tagen

That SVG filter is the whole reason this CSS scroll animation is even possible 🙏 (now with improved timing ✨)
0:16

That SVG filter is the whole reason this CSS scroll animation is even possible 🙏 (now with improved timing ✨)

jhey ʕ•ᴥ•ʔ

94,008 Aufrufe • vor 1 Jahr

introducing: text decrypt scroll effect for Framer add this to reveal text with a sleek decryption animation as you scroll. comment "DECRYPT" and I'll send you the component :)
0:11

introducing: text decrypt scroll effect for Framer add this to reveal text with a sleek decryption animation as you scroll. comment "DECRYPT" and I'll send you the component :)

Framer University

16,358 Aufrufe • vor 1 Jahr