Pure CSS scroll animation

Live demo https://codepen.io/thebabydino/pen/YzJPRvd/ If the work I've been putting out since early 2012 has helped you in any way or you just like it, please consider supporting it to help me continue and stay afloat. You can do so in one of the following ways: * you can be a cool cat 😼🎩 and become a patron on Patreon https://www.patreon.com/anatudor * you can make a one time donation via Ko-fi https://ko-fi.com/anatudor * you can make an anonymous weekly donation https://liberapay.com/anatudor/ * you can make me happy by getting me a gift off my wishlist 🎁🇺🇸 https://www.amazon.com/hz/wishlist/ls/2Y3C4722GXH0I 🎁🇬🇧 https://www.amazon.co.uk/hz/wishlist/ls/2I25W7U0KADSR * you can share this to show the world what can be done with CSS these days Thank you! --- Resources: * Scroll-Driven Animations: demos & tools https://scroll-driven-animations.style/ * Scroll-Driven Animations: talk & demo https://www.bram.us/2023/02/12/scroll-driven-animations-cover-flow-2022-10-06-full-stack-europe/ * Scroll-Driven Animations: coming in Chrome https://groups.google.com/a/chromium.org/g/blink-dev/c/RDKAi9JPHwY/m/5MWvzGPjAgAJ * Scroll-Driven Animations: used for diagonal scroll https://codepen.io/thebabydino/pen/zYJKRyq * Scroll-Driven Animations: HTTP 203 discussion https://www.youtube.com/watch?v=Qf5wdXOxW3E * Pure CSS dynamically displayed support info boxes for cutting edge features https://codepen.io/thebabydino/full/qBKvjKM * Inspiration for this demo https://codepen.io/Hyperplexed/pen/BaYXaOx --- Chapters 00:00 Problem introduction 00:28 Starting code 00:45 Create scrollbar 01:03 Fix text in the middle of viewport 02:04 Add basic background 02:20 Restrict background to text 02:54 Make text see-through 03:03 Fix cursive text edges 03:41 Add background gradient 04:17 The meaning of a percentage 04:55 Polish the gradient 05:25 Animate separator line position 06:12 The on-scroll magic! 🧚🪄✨ 06:46 Support talk 08:43 Graceful degradation 09:35 Dynamic support info in pure CSS 14:10 Custom scrollbars 15:35 That's all, folks! 🐷 #css #scroll #cssAnimation