Modern CSS Techniques to Recreate Opal's Mind-blowing Scroll Animations скачать в хорошем качестве

Modern CSS Techniques to Recreate Opal's Mind-blowing Scroll Animations

Opal's webpage for their new Tadpole webcam has many great animations on it. When exploring it last week I realised this was an awesome candidate for this week's rebuild. We won't make it a simple rebuild though – we're gonna add a pinch of modern CSS to the mix by recreating all scroll animations with Scroll-driven Animations! Scroll-driven animations are absolutely one of the favorite recent additions to CSS of mine. It wasn't long ago when we needed to use quite some JS to achieve similar results. And despite that scroll-driven animations aren't fully cross browser compatible just yet (we're really close though!!), I think it is worth exploring how we can rebuild this website with these modern CSS features. Let's dive in! — Don't forget to check to code and the live demo down below! ✨ Become a PRO today via https://www.frontend.fyi/pro 🔗 Code, live playground: https://www.frontend.fyi/v/rebuilding... Timestamps 00:00 - Intro 00:56 - Take a look at starting point 02:11 - Add text section 04:49 - How to give a text two colors? 09:41 - Animating the text reveal 14:37 - Add the parallax image animation 20:12 - Outro #frontend #css #html #animations #scrolldrivenanimationsa