Скачать или смотреть CSS-Only Scroll-Driven Animation and Other Impossible Things

Wait, you can’t do scroll-driven animation with just CSS, right? Bramus will show us that not only is it possible, but there’s even more that CSS can do these days.


Upcoming episodes:
https://lwj.dev/schedule

Links & Resources:


  / bramus  
https://www.bram.us/
https://scroll-driven-animations.style/
https://codepen.io/jlengstorf/pen/Bav...
https://scroll-driven-animations.styl...
https://chromewebstore.google.com/det...
https://codepen.io/jlengstorf/pen/mda...
https://codepen.io/jlengstorf/pen/LYM...
https://kizu.dev/
https://www.learnwithjason.dev/schedule/

Watch future episodes live at   / jlengstorf  

This episode was sponsored by:
Netlify (https://lwj.dev/netlify)
Vets Who Code (https://lwj.dev/vetswhocode)

Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/)


00:00:00 - Welcome
00:01:15 - Who is Bramus?
00:02:47 - How deep can you go with CSS?
00:06:55 - What are the most exciting parts of CSS?
00:12:00 - What is a scroll-driven animation?
00:20:10 - Example of scroll driven animations
00:26:45 - Using Carousel step indicator
00:33:23 - Getting started with scroll-driven animation on CodePen
00:41:47 - Using a calc function to animate smoother
00:44:32 - Adding a fade out
00:46:05 - What is the fill mode in animation?
00:48:58 - DevTools extension
00:55:46 - Building a cover card to fixed header animation
01:15:14 - Scrolling sections in the opposite direction
01:27:28 - Where can I learn more about scroll-driven animations with CSS?