trigger css animation quand élément dans viewport

Question

merci beaucoup pour vos yeux.

Le Javascript est destiné à retarder l'animation css jusqu'à ce que l'utilisateur ait l'élément dans sa fenêtre. Lorsque vous l'exécutez, faites défiler vers le bas pour voir cet élément. Si vous vous déplacez assez vite, vous le verrez défiler, mais cela n'attend pas.

i fait un violon avec mon code dans l'état dans lequel je crois qu'il devrait fonctionner:

https://jsfiddle.net/3jvvvf4s/

Je suis le code de ce site:

http://www.justinaguilar.com/animations/index.html#how

Hier, Je l'ai eu le travail, mais seulement quand j'ai donné les balises de classe DEUX. Il semblait donc quelque chose comme

<img class=“lazy” src=“png” class=“scroll_long”> 

La combinaison de classes ou transformer info « paresseux » un ID ne fonctionne pas.

J'ai aussi essayé ce code, je suis d'ailleurs, avec à peu près les mêmes résultats:

$(window).scroll(function() { 
$('.lazy').each(function() { 
    var imagePos = $(this).offset().top; 
    var imageHeight = $(this).height(); 
    var topOfWindow = $(window).scrollTop(); 

    if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) { 
     $(this).addClass("scroll_long"); 
    } else { 
     $(this).removeClass("scroll_long"); 
    } 
}); 

});

Toutes les pensées seraient tellement appréciées, je suis officiellement perplexe!

Answer 1

Compris!

Après avoir ajouté la classe de composés pour déclencher l'animation: .pour-anim.playit.scroll_long: animation: 5600ms cubique-Bézier (0,694, 0, 0,335, 1) 1000ms vers l'avant normale de fonctionnement 1 scrollScreen;}

J'avais oublié de supprimer l'autre style .scroll_long.

Merci encore!