You can trigger text highlights on scroll with scroll-driven animations 😎
mark {
animation: highlight;
animation-timeline: view();
}
@keyframes highlight { to { --lit: 1; }}
mark span {
background-position: calc(var(--lit) * -110%) 0;
transition: background 1s;
}
The trick is using a scroll-driven animation to flip a custom property on a <mark> element 🎚️
You flip the value between 0 and 1, and that transitions the background position of the <mark> element
mark {
--lit: 0;
animation: highlight steps(1) both;
animation-timeline: view();
animation-range: entry 100% cover 10%;
}
The background has to be applied on a child of the mark to see the change in the custom property 👀
mark span {
background: linear-gradient(
120deg, yellow 50%, transparent 50%)
110% 0 / 220% 100% no-repeat;
background-position: calc(var(--lit) * 110%) 0;
transition: background-position 1s;
}
The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙
And the property flips fills in the color 🫶 That's it!
If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎
Cool example of using CSS as an IntersectionObserver!
#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 #nodejs #reels #trending
Code in the link below 🧑💻
https://codepen.io/jh3y/pen/qBgRLxb
🎯 SUBSCRIBE to get more amazing AI Videos!
► / @3sdcode
Video Credit By: https://twitter.com/jh3yy