Author: | jlengstorf |
---|---|
Views Total: | 120 views |
Official Page: | Go to website |
Last Update: | April 9, 2024 |
License: | MIT |
Preview:

Description:
A scroll-driven text highlighting effect that allows you to progressively highlight specific text wrapped in <mark>
elements as users scroll down the page.
It’s powered by the animation-timeline CSS property, which provides precise control over the animation’s progress.
How to use it:
1. Wrap the text we want to highlight in a <mark> element.
<mark>Text To Highlight On Scroll</mark>
2. Then, we use the @keyframes
rule to define the animation, which simply changes the background position of the <mark>
element.
@keyframes highlight { to { background-position: 0; } }
3. The animation-timeline
property is set to view(60% 20%), which means the animation will start when the element is 60% of the way down the viewport and end when it’s 80% of the way down.
mark { animation: highlight linear forwards; animation-timeline: view(60% 20%); background: linear-gradient( to right, oklch(0.86 0.19 84.89 / 1) 50%, oklch(0.86 0.19 84.89 / 0) 50% ); background-position: 100%; background-size: 200% 100%; border-radius: 0.125rem; padding-inline: 0.125rem; }