image-outils-animation-web

Si vous souhaitez intégrer des animations dans vos pages web, les possibilités ne manquent pas !

Que vous cherchiez à créer des animations web discrètes pour rendre vos interfaces plus vivantes et agréables ou bien des effets impressionnants qui blufferont vos utilisateurs, les 20 bibliothèques et plugins CSS et Javascript qui suivent sauront répondre à la majorité de vos besoins.

Vous pouvez vous en servir pour animer les éléments habituels (boutons, icônes, …), mais aussi des images SVG, des particules, des nuages, des formulaires, des dégradés, des rendus 3D, …

1. Animate.css

Animate.css est une bibliothèque d’animations très complète qui couvrira la majorité de vos besoins.

animate

2. Iconate.js

Transformez vos icônes avec ces transitions animées dynamiques et agréables à l’oeil.

iconate

3. Bounce.js

Bounce.js vous permet d’expérimenter facilement avec différents styles d’animation CSS. Ajoutez un composant et ajustez les paramètres pour visualiser en direct l’animation, puis exportez le fichier CSS.

bounce

4. Lazy line painter

Ce convertisseur transforme vos artworks SVG réalisés sous Illustrator en fichiers jQuery qui gèrent l’animation du visuel. Vous pouvez faire même faire des changements directement dans le code par la suite.

lazy-line-painter

5. Rythm.js

« La bibliothèque Javascript qui fait danser votre page »

rythm

6. AniJS

AniJS permet de gérer vos animations simplement en utilisant des instructions simples comme If, On, Do, To.

anijs

7. Kute.js

Kute est un moteur d’animation très efficace, rapide et compatible avec un grand nombre de navigateurs.

kute

8. Three.js

Utilisable à la fois pour des projet simples et des projets complexes, Three.js vous permet de créer des animations 3D spectaculaires.

three

9. Snabbt.js

Cette bibliothèque Javascript minimaliste et ultra-légère permet de créer des animations simples rapidement.

snabbt

10. Motion for the Web (mo.js)

Créez des animations ultra-fluides et des effets étonnants qui blufferont vos utilisateurs.

motion-for-the-web

11. Vivus

Vivus permet d’animer des fichiers SVG en donnant l’impression qu’ils sont dessinés. Plusieurs types d’animation sont disponibles et vous pouvez également créer votre propre script.

vivus

12. ScrollReveal

ScrollReveal permet d’animer votre page au scroll (un peu à la façon de Pinterest) et fonctionne aussi bien sur navigateur web que mobile.

scrollreveal

13. Foxholder

Foxholder anime les placeholders de vos formulaires pour les rendre plus interactifs et pour encourager vos utilisateurs à compléter les informations demandées.

foxholder

14. jQlouds

Intégrez et animez des nuages sur vos pages web

jqlouds

15. Voxel.css

Voxel a été spécialement conçue pour faciliter les rendus 3D.

voxel

16. WAIT! Animate

WAIT! Animate permet d’insérer facilement des temps de pause entre les répétitions d’une animation.

wait-animate

17. Granim.js

Avec granim.js, faites des animations de dégradés fluides et interactives.

granim2

18. Particles.js

Intégrez des animations de particules en arrière-plan de vos pages web

particles

19. Rellax.js

Réalisez des animations en parallaxe grâce à cette bibliothèque Javascript

rellax

20. Curve.js

Curve anime vos lignes en les faisant tourner et onduler.

curve

(47440)