You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥
Future CSS Tip! 📜
You can create these landing page effects with CSS scroll-driven animations and zero JavaScript 🔥
Blurred text on exit? 👀
@keyframes fade {
to { opacity: 0; filter: blur(2rem); }
}
h2 {
animation: fade;
animation-timeline: view();
animation-range: cover 40% cover 85%;
}
Lots of treats in this one! ✨
How about the circular shape on scroll? That's an animated clip-path 😮
@keyframes unclip {
to { clip-path: ellipse(220% 200% at 50% 175%); }
}
Create a clip-path with a large size that's offset vertically. On scroll, animate it in ⭐️
.content {
clip-path: ellipse(220% 200% at 50% 300%);
animation: unclip both linear;
animation-timeline: --article;
animation-range: entry;
}
That second section combines unclipping with scaling down an image at the same time 🤓 Using the same animation-timeline 🫶
@keyframes scale-down {
0% { scale: 5; }
}
img {
animation: scale-down;
animation-timeline: --article; 👈
animation-range: entry;
}
Every section gets a scoped view-timeline of --article. That's scoped so we can reuse it for all the animations we need 🙌
article { view-timeline-name: --article; }
Honestly, the more you play with this stuff, the more tricks you will find 💯 And it also makes you think "Wow! CSS can do this!"
#ytshorts #html #css #javascript #programming #trendingshorts #trend #youtubeshort #ytshort #yt #ytshortsindia #shortsvideo #shorts #shortsfeed #shortfeed #viral #trending #viral #ui #webdevelopment #website #webdesign #webdeveloper #webdesigner #web3 #html #html5 #codepen #css #css3 #javascript #jquery #angular #react #creative #creativity #video #videos #vlog #vlogs #animation #animated
🎯 SUBSCRIBE to get more amazing AI Videos!
► https://www.youtube.com/@3sdcode?sub_...
Video Credit By: https://twitter.com/jh3yy