2

Lo que pasa es que tengo este codigo css3 de una animacion pero no quiero que se active hasta que al dar scroll llegue a un div determinado donde va a hacer la animación

Este es el div a donde tiene que llegar

<div class="ing"></div>

y este este es el codigo css3 de una animación que le va a aplicar

.ing{
animation-name:ing;
animation-duration:3s;
} 
@keyframes ing {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

1 respuesta 1

1

El problema se puede dividir en dos partes:

  1. Detectar cuando se comienza a ver la div para activar la animación

Lo he resuelto utilizando jQuery, mediante la función isElementVisible(elem), la cual recibe un elemento por parámetro y determina si es visible en base a distancia de scroll, tamaño de window y la posición del elemento en la página. Esta función se ejecuta al scrollear, he agregado un div de alto fijo para simular la situación de scroll.

  1. Una vez detectado lo anterior, poder activar la animación

Esto lo puedes resolver agregando y quitando la class ing dependiendo de si el elemento es visible o no, de modo que lo más correcto sería que esta clase esté ligada puramente a la animación y no a estilos propios de la div (podrías separarlo en dos clases para no quitar innecesariamente estilos). Aunque esto último no es parte de tu código aún pues no tienes mas que animación en esa clase.

// determina si un elemento comienza a ser visible
function isElementVisible(elem){
   let viewScrollTop = $(window).scrollTop(); // distancia de scroll superior
   let viewBottom = viewScrollTop + $(window).height(); // distancia de scroll + el alto actual de window (lo no visible por scroll + lo visible)
   let topElemD = $(elem).offset().top; // distancia desde el elemento hasta el tope superior del viewport
   return (topElemD < viewBottom);
}


// invoco una función anónima en el evento scroll sobre window
$(window).on("scroll" ,function() {
   let elem = $('#animated-div'); // obtengo el elemento por id
   isElementVisible(elem) ? elem.addClass('ing') : elem.removeClass('ing'); // si es visible agrego la class, de lo contrario la remuevo
});
.ing{
   animation-name:ing;
   animation-duration:3s;
} 
@keyframes ing {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:100px; height:1100px;" >
  Scroll down !
</div>

<div id="animated-div" class="ing" style="display: table; text-align:center; width:100px; height:100px; border: 1px solid blue;">
  <div style="display: table-cell; vertical-align: middle; ">Hello :)</div> 
</div>

1
  • 1
    Excelente muchísimas gracias
    – ivanrangel
    Commented el 8 oct. 2017 a las 4:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.