Aparece un efecto de animación cuando el elemento es visible al desplazarse.
Quería que la animación comenzara cada vez que me desplazaba hacia abajo y que mantuviera la animación terminada cuando me desplazaba hacia arriba. He estado pensando en ello, pero... No sé cómo. Por favor ayuda.
Esta es la página de implementación.
window.onload = function () { const targets = document.querySelectorAll('[data-observer]') const images = document.querySelectorAll('[data-img]') const options = { rootMargin: '0px', threshold: 1.0 } const addClass = (el) => { if (!el.classList.contains('is-visible')) { el.classList.add('is-visible') } } const removeClass = (el) => { if (el.classList.contains('is-visible')) { el.classList.remove('is-visible') } } const doThings = (entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { addClass(entry.target) } else { removeClass(entry.target) } }) } const observer = new IntersectionObserver(doThings, options) const observer2 = new IntersectionObserver(doThings, { ... options, threshold: 0.4 }) targets.forEach(target => { observer.observe(target) }) images.forEach(target => { observer2.observe(target) }) }Sí puedes, aquí tomamos un ejemplo para eso.
Tienes que animar un texto mientras te desplazas. entonces haz esto
window.onscroll = function () { myFunction() }; var header = document.getElementById("header"); function myFunction() { if (window.pageYOffset >= 50) { header.classList.add("animate"); } else { header.classList.remove("animate"); } } body{ height:1500px; width:100vw; } .text{ color:RED; background:black; font-size:30px; font-weight:bold; letter-spacing:1px; position:fixed; top:0%; } .text.animate{ animation:example 2s ease-in-out infinite; } @keyframes example{ 0%{ letter-spacing:1px; } 50%{ letter-spacing:5px; } 100%{ letter-spacing:1px; } } <body> <div class="text" id="header">TEXT ANIMATION</div> </body>