Activar animación CSS3 cuando el contenido se desplaza a la vista

Tengo un gráfico de barras que se anima con CSS3 y la animación se activa actualmente a medida que se carga la página.

El problema que tengo es que el gráfico de barras dado se coloca fuera de la pantalla debido a un montón de contenido antes de que así que cuando el usuario se desplaza hacia abajo, la animación ya ha finalizado.

Estaba buscando formas, a través de CSS3 o jQuery, de activar solo la animación CSS3 en el gráfico de barras cuando el espectador ve el gráfico.

lots of content here, it fills the height of the screen and then some
animating bar chat here

Si se desplaza hacia abajo muy rápido justo después de cargar la página, puede verla animando.

Aquí hay un jsfiddle de mi código. Además, no sé si esto importa, pero tengo varias instancias de este gráfico de barras en la página.

Me encontré con un complemento de jQuery llamado waypoint, pero no tuve absolutamente ninguna suerte de hacerlo funcionar.

Si alguien pudiera señalarme en la dirección correcta, sería realmente útil.

¡Gracias!

Capturar eventos de desplazamiento

Esto requiere el uso de JavaScript o jQuery para capturar eventos de desplazamiento, comprobando cada vez que un evento de desplazamiento se dispara para ver si el elemento está a la vista.

Una vez que el elemento está a la vista, comience la animación. En el siguiente código, esto se hace agregando una clase de “inicio” al elemento, que desencadena la animación.

Demo actualizado

HTML

 
80%

CSS

 .eighty.start { width: 0px; background: #aae0aa; -webkit-animation: eighty 2s ease-out forwards; -moz-animation: eighty 2s ease-out forwards; -ms-animation: eighty 2s ease-out forwards; -o-animation: eighty 2s ease-out forwards; animation: eighty 2s ease-out forwards; } 

jQuery

 function isElementInViewport(elem) { var $elem = $(elem); // Get the scroll position of the page. var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); var viewportTop = $(scrollElem).scrollTop(); var viewportBottom = viewportTop + $(window).height(); // Get the position of the element on the page. var elemTop = Math.round( $elem.offset().top ); var elemBottom = elemTop + $elem.height(); return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); } // Check if it's time to start the animation. function checkAnimation() { var $elem = $('.bar .level'); // If the animation has already been started if ($elem.hasClass('start')) return; if (isElementInViewport($elem)) { // Start the animation $elem.addClass('start'); } } // Capture scroll events $(window).scroll(function(){ checkAnimation(); }); 

A veces necesita que la animación siempre ocurra cuando el elemento está en la ventana gráfica. Si este es tu caso, modifiqué ligeramente el código de Matt jsfiddle para reflejar esto.

jQuery

 // Check if it's time to start the animation. function checkAnimation() { var $elem = $('.bar .level'); if (isElementInViewport($elem)) { // Start the animation $elem.addClass('start'); } else { $elem.removeClass('start'); } } 

Para activar una animación CSS, se debe agregar una clase al elemento cuando esto se vuelva visible. Como han indicado otras respuestas, se requiere JS para esto y Waypoints es un script JS que se puede usar.

Waypoints es la manera más fácil de activar una función cuando se desplaza a un elemento.

Hasta Waypoints versión 2, solía ser un plugin de jquery relativamente simple. En la versión 3 y superior (esta versión de la guía 3.1.1) se han introducido varias características. Para lograr lo anterior con esto, se puede usar el atajo ‘inview’ del script:

  1. Descargue y agregue los archivos de script desde este enlace o desde Github (la versión 3 aún no está disponible a través de CDNJS , aunque RawGit siempre es una opción).

  2. Agregue la secuencia de comandos a su HTML como de costumbre.

       
  3. Agregue el siguiente código JS, que reemplaza #myelement con el selector de elemento HTML jQuery apropiado:

     $(window).load(function () { var in_view = new Waypoint.Inview({ element: $('#myelement')[0], enter: function() { $('#myelement').addClass('start'); }, exit: function() { // optionally $('#myelement').removeClass('start'); } }); }); 

Usamos $(window).load() por las razones explicadas aquí .

Actualizado el violín de Matt aquí .

Además de estas respuestas, considere estos puntos:

1- Verificar el elemento a la vista tiene muchas consideraciones:
¿Cómo saber si un elemento DOM está visible en la ventana gráfica actual?

2- Si alguien quería tener más control sobre la animación (por ejemplo, establecer ” el tipo de animación ” y ” inicio de demora “) aquí hay un buen artículo al respecto:
http://blog.webbb.be/trigger-css-animation-scroll/

3- Y también parece que llamar a addClass sin demora (usando setTimeout ) no es efectivo.

 CSS FOR TRIGGER : .trigger{ width: 100px; height: 2px; position: fixed; top: 20%; left: 0; background: red; opacity: 0; z-index: -1; }