Estoy tratando de animar algunos elementos. Hay intervalos dentro de un div contenedor de contenido. Una vez que llegamos al div con la clase content-wrapper , la clase b-fadein se agrega a cada tramo, y la animación debería comenzar, y los tramos deberían aparecer uno tras otro.
$(window).scroll(function() { $('.el').each(function(){ var pos = $(this).offset().top; var topOfWindow = $(window).scrollTop(); if (pos < topOfWindow+400) { $(this).addClass("b-fadein"); } }); });Animación.
.b-fadein { /* hidden by default */ opacity: 0; animation: fadeIn 0.5s linear forwards; animation-delay: calc(0.5 * var(--i)); } @keyframes fadeIn { from { /* is not visible*/ opacity: 0; } to { /* is visible */ opacity: 1; } }HTML
<div class="content-wrapper" style=""> <!-- 0 --> <span style="--i: 0; opacity:0;" class="el el1">1</span> <!-- 1 --> <span style="--i: 1; opacity:0;" class="el el2">2</span> <!-- 2 --> <span style="--i: 2; opacity:0;" class="el el3">3</span> <!-- if more elements, increase the --i css variable for next elements --> </div> Actualmente, el efecto deseado solo es visible cuando cada intervalo dentro content-wrapper se muestra como una línea (la dirección flexible se establece en columna). Pero todos los tramos pueden estar en la misma línea.
El problema es que, si están en la misma línea, se muestran al mismo tiempo una vez que llegamos al content-wrapper .
¿Cómo mostramos los tramos uno tras otro una vez que llegamos al div content-wrapper?
No necesita jQuery para eso, puede usar JavaScript Vanilla Intersection Observer API para realizar un seguimiento de la intersection ratio de tramos
Básicamente, debes seguir estos pasos:
opacity:0 al elemento spanIntersection Observerentry.target.style.opacity (intervalo actual) a '1' en función de la relación de entry.intersectionRatiodemostración:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> body { /* for demo purposes only */ margin: 30em 0; } body span { /* for demo purposes only */ display: flex; flex-direction: row; opacity: 0; font-size: 1.5em; padding: 3.33em 0; transition: opacity 1200ms linear; } </style> <title>Intersection Observer API</title> </head> <body> <section id="content-wrapper"> <span>span item</span> <span>span item</span> <span>span item</span> <span>span item</span> <span>span item</span> <span>span item</span> <span>span item</span> <span>span item</span> <span>span item</span> </section> <script> let observer = new IntersectionObserver( (entries, observer) => { entries.forEach((entry) => { if (entry.intersectionRatio) { entry.target.style.opacity = '1' observer.unobserve(entry.target) } }) }, { rootMargin: '0px 0px 100px 0px' }, ) document.querySelectorAll('span').forEach((span) => { observer.observe(span) }) </script> </body> </html>información completa sobre Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
$('span').each(function(i) { (function(self) { setTimeout(function() { $(self).addClass('b-fadein'); },(i*1500)+1500); })(this); });Simplemente agregue este código jquery cuando llegue al contenedor de contenido . Creo que esto te ayudará a mostrar los tramos uno tras otro. Acabo de agregar una función setTimeout para proporcionar un retraso para agregar la clase a su lapso.