Consulta Js

[GreenKhulta]

a ver si puedo ayudarte, te dejo el demo en codepen: codepen.io/GreenKhulta/pen/eoCls/

supongamos que los elementos que quieres animar tienen un atributo class con el mismo

valor:

Código HTML:

<!-- elementos animables -->
 
<div class="div" id="A"></div>
<div class="div" id="B"></div>
<div class="div" id="C"></div>
<div class="div" id="D"></div>
<div class="div" id="E"></div>
 

entonces, en el código javascript podriamos generar una lista con todos los elementos

con el atributo class y con el valor "div" o el valor que tu especifiques.

a partir de aqui, una vez hayamos detectado si el elemento se encuentra dentro del viewport,

comprobamos el id del elemento y se dispara la animacion concreta para este elemento.

la comprobacion se hace asi:

Código Javascript:

else if(lista[i].id =="E"){
        lista[i].style.animation="animacion5 2s";
        lista[i].style.webkitAnimation="animacion5 2s";
      }
 

aqui se comprueba si el elemento tiene el id == "E". en ese caso se dispara la animacion5.



durante 2s.

aqui esta el codigo entero, que deberias englobar entre los tag <script> y situarlo al final

de la pagina(footer).

Código Javascript:

function inViewport () {
  
  var lista = document.querySelectorAll(".div");
  
  for (var i = 0; i < lista.length; i++ ){
    
    if (lista[i].getBoundingClientRect().top < window.innerHeight){
      
      if(lista[i].id == "A"){
        lista[i].style.animation="animacion 2s";
         lista[i].style.webkitAnimation="animacion 2s";
      }
      
      else if(lista[i].id =="B"){
        lista[i].style.animation="animacion2 2s";
        lista[i].style.webkitAnimation="animacion2 2s";
      }
      else if(lista[i].id =="C"){
        lista[i].style.animation="animacion3 2s"
        lista[i].style.webkitAnimation="animacion3 2s";
      }
      else if(lista[i].id =="D"){
        lista[i].style.animation="animacion4 2s";
        lista[i].style.webkitAnimation="animacion4 2s";
      }
      else if(lista[i].id =="E"){
        lista[i].style.animation="animacion5 2s";
        lista[i].style.webkitAnimation="animacion5 2s";
      }
 
  }
  }
}
window.onload = inViewport;
window.onscroll = inViewport;
 

espero haberme explicado. probablemente haya mejores formas de hacerlo, a ver si alguien mas se anima.