Consulta Js

[n0ck]

Muy buenas señores/as,

mi duda es la siguiente, he conseguido crear mis primeras animaciones con CSS3, y el problema que tengo ahora es que al refrescar la home, cargan todas de golpe, es decir, cargan las de más arriba que se ven perfectamente, pero las animaciones del footer de la web también se ejecutan por lo que no se aprecian en ningún momento, mi pregunta es ¿Cómo puedo hacer que se vayan ejecutando conforme voy haciendo scrolldown?

gracias de antemano,
Salu2

[GreenKhulta]

Buenas.

podrias hacerlo con js detectando si los elementos a animar se encuentran dentro del viewport:

Código Javascript:

var elem = document.querySelector(".elementoQueQuieras");
 
function inViewport () {
 
  //detecta si esta dentro del viewport
 
  if (elem.getBoundingClientRect().top < window.innerHeight){
 
    //disparar la animación
 
  }
}
 

esta funcion deberia ser ejecutada una vez cargada la pagina y cuando el usuario hace scroll:

Código Javascript:

window.onload = inViweport;
 
window.onscroll = inViewport;
 

[n0ck]

Gracias por tu respuesta, pero me temo que vas a tener que explicarme un poco más por favor, no he tocado javascript de lleno nunca:

Imagino que el primer trozo de código lo meto entre <script></script> y lo sitúo en el head, y dónde pone el elemento que quieras meto todos los elementos?, tengo unos 6 efectos distintos. Dónde pones disparas la animación que debo escribir ahí? y por último, dónde hablas de window.onload = inViweport; y onscroll no entiendo dónde sitúo ese trozo de código.

Gracias de antemano

[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.

[n0ck]

Veamos, a ver si podemos ir concretando. Para llamar a un efecto lo que hago es siempre esto; class="animated fadeInLeft", animated es imprescindible, lo que cambia es fadeInLeft (flipInY, fadeInRight) por tanto sabiendo esto podrías ajustarme tu código?, he probado una cosa y otra y no me surge efecto :(

Gracias!

[GreenKhulta]

a ver si ahora estamos mas cerca: http://codepen.io/GreenKhulta/pen/eoCls

[n0ck]

Muchísimas gracias!, me ha valido :)