I want to mimic a effect of a "real time" highlighter. It consist as the user is reading a news on my website.
The news are usually really big, that's why I want to pin point the highlighted phrases (chosen by the news' creator), providing a change in background color, with a smooth transition, starting from the left to the right. As someone is highlighting it to you while you're reading the news.
Below you can found what I got. I don't know why it's not creating the transition. It just appears as static highlighting.
CSS:
.highlight .highlighted {
background-position: -100%;
}
.highlight {
background-image: linear-gradient(90deg,rgba(255,255,255,0) 50%, #F3D1CE 0);
background-size: 200%;
background-position: 0%;
transition: background-position .8s;
}
HTML:
<p>
Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Aenean commodo ligula eget dolor. Nunc sed turpis.
<span class="highlight highlighted">
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</span>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
JS:
const target = document.querySelector('.highlight');
function handleIntersection(entries) {
entries.map((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('highlighted')
} else {
entry.target.classList.remove('highlighted')
}
});
}
const observer = new IntersectionObserver(handleIntersection);
observer.observe(target);
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…