Question

0

80

Vistas

Haga que la animación suceda cuando una sección esté a la vista usando javascript

Todavía estoy aprendiendo diseño web y quería comenzar una animación en un div que está en el medio de la página. Lo busqué pero en todas partes lo encontré usando j-query. ¿Hay alguna manera de que se pueda hacer usando CSS puro y JavaScript?

 <div>A lot of contents which take whole screen</div> <div>Section where animation has to happen when come into view</div>

Por favor, ayuda si se puede hacer usando solo javascript y, si no, cuál es la forma más fácil de hacerlo.

over 4 years ago · Santiago Trujillo

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-03-25T13:53:08.050Z

Acabo de buscar como lo hiciste tú y encontré una respuesta `js` pura

REFERENCIA

 var elements; var windowHeight; document.getElementById('content').innerText = "A lot of content to fill up the page. ".repeat(500) function init() { elements = document.querySelectorAll('.noanimfornow'); windowHeight = window.innerHeight; } function checkPosition() { for (var i = 0; i < elements.length; i++) { var element = elements[i]; var positionFromTop = elements[i].getBoundingClientRect().top; //console.log(positionFromTop,windowHeight); if (positionFromTop - windowHeight <= 0) { element.classList.add('animateme'); element.classList.remove('noanimfornow'); } if (positionFromTop - windowHeight > 0) {/*newly added:Edit2*/ element.classList.add('noanimfornow'); element.classList.remove('animateme'); } } } window.addEventListener('scroll', checkPosition); window.addEventListener('resize', init); init(); checkPosition();

 @keyframes myanim { from { opacity: 0; transform: scale(.7, .7) } to { opacity: 1; } } .animateme { animation: myanim 5s; } .noanimfornow { opacity: 0; }

 <div id="content"></div> <div class="noanimfornow">Section where animation has to happen when come into view</div>

Primero, para el div, necesita animación solo cuando se desplaza, establezca la clase en noanimfornow ,
A continuación, en js , verificamos la posición del desplazamiento y configuramos la clase para que se animateme cuando llegue a la vista,
También verificamos cualquier evento de cambio de tamaño e init la función de inicio si es necesario en js
finalmente ponemos algo de animacion para esos en css

Answer 2 · 2022-03-25T13:53:08.352Z

Esta respuesta hace exactamente lo mismo que la otra respuesta, pero usa `IntersectionObserver`

Por lo tanto, "No es necesario ingresar JS en cada pergamino". - Un comentario de Haworth

Este Código se refiere desde aquí

también he usado la edición de Tschallacka para eliminar copiar y pegar (usando .repeat(500) en js)

 var elements; var windowHeight; document.getElementById('content').innerText = "A lot of content to fill up the page. ".repeat(500) const observer = new IntersectionObserver(entries => { entries.forEach(entry => { const square = entry.target.querySelector('.noanimfornow'); if (entry.isIntersecting) { square.classList.add('animateme'); return; // if we added the class, exit the function } // We're not intersecting, so remove the class! square.classList.remove('animateme'); }); }); observer.observe(document.querySelector('.animwrapper'));

 @keyframes myanim { from { opacity: 0; transform: scale(.7, .7) } to { opacity: 1; } } .animateme { animation: myanim 5s; } .noanimfornow { opacity: 0; }

 <div id="content"></div> <div class="animwrapper"> <div class="noanimfornow">Section where animation has to happen when come into view</div> </div>

0

80