CSS ONLY: Scroll Direction & Velocity.
I used @jh3yy's concept of capturing the scroll velocity to achieve this.
It also helped me capture the scroll direction.
100 changes.. To save the pen or not... 🤔
#CssOnly#CSS#CSSwithEIO#Frontend#Webdev
the trick to that is to animate two custom properties on scroll but set use one as a transition-property
if the scroll stops, there will be no transition so the values will match. when scrolling, one value would lag because of the transition 🤙
Today is the 30th of April, which means the day 30 of #CSSwithEIO has gone up;
And it's a wrap!
🎉🎉🎉🎉
I want to specially thank @KevinJPowell for his great support right from the beginning and for being a huge inspiration for this! 🙏🏾
Get ready for your daily dose of CSS nuggets! 🔥
#CSSwithEIO is gearing up to deliver daily insights and best practices to empower your #CSS journey.
Share with everyone who needs to see this.
Day 1/30 begins April 1st 2024!
Don't miss out!
#css#frontend#webdev
#CSSwithEIO - Day 30/30
Stay on top of the latest CSS advancements by subscribing to CSS blogs and following CSS evangelists like @KevinJPowell, @argyleink, @iamdillion, @Una
You'll learn about new CSS features and best practices for their implementation.
#css#frontend#webdev
#CSSwithEIO - Day 12/30
Less is more.
Avoid style cocktails.
Write only necessary styles.
Every unnecessary rule raises the chances of bugs and adds extra complexity, which would also make your code harder to maintain.
#css#frontend#webdev
Get ready for your daily dose of CSS nuggets! 🔥
#CSSwithEIO is gearing up to deliver daily insights and best practices to empower your #CSS journey.
Share with everyone who needs to see this.
Day 1/30 begins April 1st 2024!
Don't miss out!
#css#frontend#webdev
Get ready for your daily dose of CSS nuggets! 🔥
#CSSwithEIO is gearing up to deliver daily insights and best practices to empower your #CSS journey.
Share with everyone who needs to see this.
Day 1/30 begins April 1st 2024!
Don't miss out!
#css#frontend#webdev