AccueilActualitésRessourcesCréez des animations HTML5 avec la bibliothèque Javascript Anime.js Ressources Créez des animations HTML5 avec la bibliothèque Javascript Anime.js Publié le 29/12/2016 Partager cet article : Partager sur Facebook Partager sur Twitter Partager sur Linkedin Share on pinterest 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. By Benjamin Sanchez Laisser un commentaire Annuler la réponseVotre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *Comment Nom * E-mail* Site web Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire.
Ressources Les ressources et outils Javascript pour vous simplifier le traitement de données #3 Publié le 18/07/2013