Estoy tratando de resaltar un texto cuando la página se desplaza, se marca debajo y, por lo que he encontrado en la red, el código es así. Pero parece que estoy haciendo algo mal y no puedo hacerlo bien. Tenga en cuenta que soy muy nuevo y recién comencé a aprender desarrollo web.
(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>El código JS es correcto, solo tiene 2 errores en el código CSS, pierde una coma dentro de la declaración linear-gradient y está diseñando la clase .mark , mientras que necesita diseñar los elementos de mark :
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>Si desea un control más granular sobre los eventos de desplazamiento, por ejemplo, es posible que desee revertir animaciones, agregar comportamientos adicionales como tambaleo, etc. Le sugiero que pruebe el complemento GSAP ScrollTrigger , hace que las cosas sean mucho más fáciles que tener que manipular css y Intersection Observer directamente.