Quelques exemples d'éléments graphiques avec de belles animations.
Article très intéressant sur l'art et la manière de créer des animations fluides et "naturelles". Clairement, l'optimisation n'est pas simple lorsque l'on vise les 60 FPS constants.
Belle démo d'animation CSS.
Jouer avec les animations CSS en live.
Plein de styles de checkbox, certaines en full CSS, d'autres avec du Javascript en plus.
Une chouette animation pour le menu hamburger.
Utilisation de Three.js pour animer des scènes plus ou moins complexes.
Des effets hover originaux (un peu lourds pour certains).
Des effets "hover" assez originaux.
Via https://blog.stephaniewalter.fr/semaine-pixels-25-novembre-2016/
Une autre lib JS pour gérer les animations CSS en JS.
Un petit topo sur les performances et l'optimisation des animations CSS. En outre, on y montre comment visualiser tout ça avec les outils de développement.
Une librairie Javascript pour faire des animations au scroll.
Comme dit dans la source, attention à ne pas en abuser, et surtout attention à mettre un timer suffisamment court. Il n'y a rien de plus chiant que les sites sur lesquels il faut attendre 2 secondes à chaque scroll pour que le contenu apparaisse.
Via https://blog.stephaniewalter.fr/semaine-pixels-19-aout-2016/
Une librairie qui permet de construire des animations CSS purement en JS. C'est assez intéressant dans le sens où ça combine la flexibilité des animations jQuery de la vieille époque avec l'optimisation et la rapidité des animations CSS modernes.
Et comme la fonction attend un objet Javascript, c'est assez facile de définir quelques animations et de les réutiliser.
Le repo Github est ici : https://github.com/juliangarnier/anime
Un effet glitch très bien foutu à appliquer sur du texte. Et c'est du pur CSS.