I am trying to highlight a text when the page scrolls it gets marked underneath, and from what I've found on the net, the code goes like this. But it seems I am doing something wrong and I cannot get it right. Please note I am very new and just started learning web-development.
(function(document) {
const markers = [...document.querySelectorAll('mark')];
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
entry.target.style.animationPlayState = 'running';
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.8,
});
markers.forEach((mark) => {
observer.observe(mark);
});
}(document));.mark {
--color1: springgreen;
--color2: springgreen;
--bg-height: 40%;
all: unset;
background-image: linear-gradient(var(--color1) var(--color2));
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0 var(--bg-height);
-webkit-animation: highlight 800ms 1 ease-out;
animation: highlight 800ms 1 ease-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@-webkit-keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}
@keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}<main>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat quas asperiores ut numquam, quidem blanditiis sint explicabo qui amet reiciendis doloremque, minima illo. Repudiandae iste quis nihil itaque porro.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut aut laudantium ullam! <mark>Tempore sapiente molestiae</mark> nam amet quaerat quisquam doloremque eveniet dolores? Laborum asperiores, obcaecati minima minus qui esse ab?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sapiente ea alias unde qui mollitia earum pariatur nesciunt incidunt, <mark>tenetur nemo iure aspernatur maiores.</mark> Laboriosam placeat quae eos recusandae explicabo?</p>
</main>The JS code is right, you just have 2 errors in CSS code, you miss a comma inside the linear-gradient declaration, and you are styling the .mark class, while you need to style the mark elements:
const markers = [...document.querySelectorAll('mark')];
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
entry.target.style.animationPlayState = 'running';
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.8,
});
markers.forEach((mark) => {
observer.observe(mark);
});p,
h2 {
margin-bottom: 500px;
}
mark {
--color1: springgreen;
--color2: blue;
--bg-height: 40%;
all: unset;
background-image: linear-gradient(var(--color1), var(--color2));
background-position: 100% 100%;
background-repeat: no-repeat;
background-size: 0% var(--bg-height);
animation: highlight 800ms 1 ease-out;
animation-fill-mode: forwards;
animation-play-state: paused;
}
@-webkit-keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}
@keyframes highlight {
to {
background-size: 100% var(--bg-height);
}
}<main>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis quaerat quas asperiores ut numquam, quidem blanditiis sint explicabo qui amet reiciendis doloremque, minima illo. Repudiandae iste quis nihil itaque porro.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut aut laudantium ullam! <mark>Tempore sapiente molestiae</mark> nam amet quaerat quisquam doloremque eveniet dolores? Laborum asperiores, obcaecati minima minus qui esse ab?</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Veniam sapiente ea alias unde qui mollitia earum pariatur nesciunt incidunt, <mark>tenetur nemo iure aspernatur maiores.</mark> Laboriosam placeat quae eos recusandae explicabo?</p>
</main>If you want a more granular control over the scroll events, for example you might want to revert animations, add additional behaviours like staggering, etc... I suggest you to try the GSAP ScrollTrigger plugin, it makes things much easier than having to manipulate css and Intersection Observer directly.