web-dev-qa-db-fra.com

Appliquer la transition CSS lorsque l'élément entre dans la fenêtre

J'essaie d'appliquer un effet de transition CSS lorsqu'un élément arrive dans la fenêtre d'affichage (c'est-à-dire lorsque l'utilisateur y fait défiler), mais pas avant.

Je sais déjà comment utiliser les transitions CSS, mais comment les appliquer uniquement lorsque l'élément arrive dans la fenêtre?

Quelle est la meilleure façon de procéder? S'il y a des bibliothèques pour simplifier la tâche, je serais heureux de le savoir.

cssanimationtransitionviewport
16
ZeiZei

Voici une excellente démo:

Faites glisser (lorsque vous faites défiler vers le bas) Boîtes | Astuces CSS http://bit.ly/19NN2NJ
Faites glisser à partir des cases inférieures - CodePen http://bit.ly/1dvNF9

Peut-être que cela vous aide à voir le point. Le point est de détecter une fenêtre et d'appliquer un effet juste sur Scroll comme vous pouvez le voir dans la démo. Si vous voulez de l'aide avec un bug ou un problème spécifique, envoyez simplement une source :-) et je résoudrai.

13
Samuel Ondrek

Donnez CSS3 Animate It a go, rend l'ensemble du processus aussi simple que l'ajout de quelques clases.

http://jackonthe.net/css3animateit/

Ensuite, vous pouvez simplement ajouter des classes comme celle-ci pour commencer.

<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>
12
Jack