Скачать или смотреть 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