• A la une
  • Catégories
  • Dossiers
  • +

Créez des animations HTML5 avec la bibliothèque Javascript Anime.js

par Benjamin SANCHEZle 29/12/2016

Aujourd'hui le BlogDuWebdesign vous propose de découvrir un outil Javascript permettant de simplifier la création d'animations : Anime.js

Animer le DOM avec Anime.js

Il peut exister de très nombreuses manières différentes de créer des animations pour le web. Il est possible d'utiliser des vidéos ou Gif bien sur, ou de passer par une animation faite en Canvas. Il est aussi possible d'animer directement ses éléments HTML (le DOM) avec du CSS ou du Javascript. C'est cette dernière option qui va nous intéresser aujourd'hui avec une ressource permettant de simplifier grandement le processus, Anime.js.

Anime.js est une library Javascript légère et flexible qui vous permettra de mettre en place des animations complexes sans trop de prise de tête, creer par Julian Garnier.

Son utilisation est assez simple : composez vos animations en les décomposant étape par étapes. Le ciblage des éléments a impacté se fait comme pour du CSS.

var myAnimation = anime({
  targets: ['.blue', '.green'],
  translateX: '13rem',
  rotate: 180,
  borderRadius: 8,
  duration: 2000,
  loop: true
});

Evidemment, il est possible de creer des animations tres complexes, je vous en mets quelques exemples en dessous.

 

 

 

 

 

Anime.js est une ressource assez jeune mais tres bien maintenue et avec d'assez bonnes performances, meme en cas d'assez grand nombre d'elements. Attention à ne pas trop multiplier les éléments tout de même, la manipulation du DOM à beaucoup de mal à le supporter. En cas de besoins de ce type (pour des particules par exemple) je vous conseille d'utiliser Canvas.

See the Pen anime.js stress test by Julian Garnier (@juliangarnier) on CodePen.

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir