Attiva l’animazione CSS3 quando il contenuto scorre in visualizzazione

Ho un grafico a barre che si anima con CSS3 e l’animazione si triggers al momento del caricamento della pagina.

Il problema che ho è che il grafico a barre dato viene messo fuori dallo schermo a causa di un sacco di contenuti prima che così dal momento in cui un utente scorre verso il basso, l’animazione è già finita.

Stavo cercando modi attraverso CSS3 o jQuery per triggersre solo l’animazione CSS3 sul grafico a barre quando lo spettatore vede il grafico.

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

Se scorri verso il basso molto velocemente subito dopo il caricamento della pagina, puoi vederlo animare.

Ecco un jsfiddle del mio codice. Inoltre, non so se questo è importante, ma ho diverse istanze di questo grafico a barre sulla pagina.

Mi sono imbattuto in un plug-in jQuery chiamato waypoint, ma non ho avuto assolutamente fortuna a farlo funzionare.

Se qualcuno potesse indicarmi la giusta direzione, sarebbe davvero d’aiuto.

Grazie!

Cattura gli eventi di scorrimento

Ciò richiede l’utilizzo di JavaScript o jQuery per catturare gli eventi di scorrimento, controllando ogni volta che viene triggersto un evento di scorrimento per vedere se l’elemento è visibile.

Una volta che l’elemento è in vista, avvia l’animazione. Nel codice qui sotto, questo viene fatto aggiungendo una class “start” all’elemento, che triggers l’animazione.

Demo aggiornata

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 volte è necessario che l’animazione si verifichi sempre quando l’elemento si trova nella vista. Se questo è il tuo caso, ho modificato leggermente il codice jsfiddle di Matt per riflettere questo.

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'); } } 

Per triggersre un’animazione CSS, è necessario aggiungere una class all’elemento quando questo diventa visibile. Come indicato da altre risposte, JS è necessario per questo e Waypoint è uno script JS che può essere utilizzato.

Waypoint è il modo più semplice per triggersre una funzione quando scorri verso un elemento.

Fino alla Waypoint versione 2, questo era un plugin jquery relativamente semplice. Nella versione 3 e successive (questa guida versione 3.1.1) sono state introdotte diverse funzionalità. Per ottenere quanto sopra descritto, è ansible utilizzare la “scorciatoia inview” dello script:

  1. Scarica e aggiungi i file di script da questo link o da Github (la versione 3 non è ancora disponibile tramite CDNJS , anche se RawGit è sempre un’opzione).

  2. Aggiungi lo script al tuo HTML come al solito.

       
  3. Aggiungi il seguente codice JS, sostituendo #myelement con l’elemento HTML appropriato selettore jQuery:

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

Usiamo $(window).load() per ragioni spiegate qui .

Aggiornato il violino di Matt qui .

Oltre a queste risposte, ti preghiamo di prendere in considerazione questi punti:

1- Il controllo dell’elemento in vista ha molte considerazioni:
Come capire se un elemento DOM è visibile nella finestra corrente?

2- Se qualcuno volesse avere più controllo sull’animazione (es. Impostare ” il tipo di animazione ” e ” start delay “) ecco un buon articolo a riguardo:
http://blog.webbb.be/trigger-css-animation-scroll/

3- E sembra anche che chiamare addClass senza un ritardo (usando setTimeout ) non sia efficace.

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