How To Create This Unbelievable CSS Scroll Animation

Описание: I was recently challenged on Twitter to recreate this amazing scroll based animation, and it was so fun. I even decided to make the challenge more difficult by doing nearly everything in just plain CSS instead of doing it all in JavaScript. In this video I show you how I created this animation.


📚 Materials/References:

GitHub Code: https://github.com/WebDevSimplified/l...
Intersection Observer Video:    • Learn Intersection Observer In 15 Minutes  
Intersection Observer Article: https://blog.webdevsimplified.com/202...


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon:   / webdevsimplified  
Twitter:   / devsimplified  
Discord:   / discord  
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
01:03 - Demo
03:15 - How I examine this animation
05:30 - JavaScript scroll variable setup
11:03 - Top section scrolling CSS
20:41 - Top section image CSS
27:50 - Other image CSS (IntersectionObserver)
31:20 - IntersectionObserver JavaScript


#CSS #WDS #ScrollAnimation