{"id":3295,"date":"2023-11-18T12:55:00","date_gmt":"2023-11-18T11:55:00","guid":{"rendered":"https:\/\/jagullo.fr\/blog\/?p=3295"},"modified":"2023-03-11T17:52:40","modified_gmt":"2023-03-11T16:52:40","slug":"creer-des-animations-js-avec-jquery-ou-anime-js","status":"publish","type":"post","link":"https:\/\/jagullo.fr\/blog\/creer-des-animations-js-avec-jquery-ou-anime-js\/","title":{"rendered":"Cr\u00e9er des animations JS avec jQuery ou Anime.js"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Les animations JavaScript<\/h2>\n\n\n\n<p>Mettre en place <strong>des animations en JavaScript<\/strong> sur des interactions de l&rsquo;utilisateur peut apporter du dynamisme et rendre une page HTML moins statique. Depuis la fin du Flash Player et la d\u00e9mocratisation du <a href=\"https:\/\/jagullo.fr\/blog\/le-concept-de-responsive-web-design\/\">responsive web design<\/a>, les sites sont beaucoup plus classiques. Pour optimiser le r\u00e9f\u00e9rencement, les d\u00e9veloppeurs web et les agences prennent beaucoup moins de risque en privil\u00e9giant un contenu qui s&rsquo;affiche de fa\u00e7on statique dans une page web. En m\u00eame temps peu de moteurs de recherche r\u00e9f\u00e9rence le contenu en JavaScript comme le fait Google ce qui peut poser des probl\u00e8mes de r\u00e9f\u00e9rencement avec les frameworks modernes. Ajouter de l&rsquo;animation en JavaScript dans une page peut am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur du site.<\/p>\n\n\n\n<p>Cependant r\u00e9aliser une animation en pur JavaScript est assez difficile. Pour <strong>faciliter le d\u00e9veloppement<\/strong> avec un code et un script plus simple, il est possible d&rsquo;utiliser la librairie <strong>jQuery<\/strong> ou <strong>Anime.js<\/strong> qui proposent de nombreuses fonctions d\u00e9j\u00e0 faites pour animer les \u00e9l\u00e9ments d&rsquo;une page HTML. Il existe d&rsquo;autres librairies en open source ou payantes dont certaines viennent de l&rsquo;environnement Action Script comme <strong>GreenSock<\/strong> et aussi quelques fonctions natives en JS pour r\u00e9aliser des animations. La librairie jQuery n&rsquo;a pas pour objectif d&rsquo;\u00eatre un moteur d&rsquo;animation complet, c&rsquo;est pour \u00e7a que les fonctions qu&rsquo;elle propose sont relativement sommaires, mais suffisent pour de petits effets. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/03\/illustration_animation-javascript.png\" alt=\"Les animations JavaScript pour un web moderne\" class=\"wp-image-3871\" width=\"720\" height=\"480\" srcset=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/03\/illustration_animation-javascript.png 960w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/03\/illustration_animation-javascript-300x200.png 300w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/03\/illustration_animation-javascript-768x512.png 768w\" sizes=\"(max-width: 720px) 100vw, 720px\" \/><figcaption class=\"wp-element-caption\">Les animations JavaScript pour un web moderne<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Animer des \u00e9l\u00e9ments avec jQuery<\/h2>\n\n\n\n<p>jQuery propose plusieurs fonctions bien utiles comme les fonctions <strong>fadeIn<\/strong>, <strong>fadeOut<\/strong> et <strong>fadeTo<\/strong> pour r\u00e9aliser un fondu. sur un \u00e9l\u00e9ment de la page. On peut par exemple afficher une l\u00e9gende au survol d&rsquo;une image comme dans l&rsquo;exemple ci-dessous ou faire apparaitre une alerte en validant un formulaire qui n&rsquo;est pas correctement rempli. Quasiment toutes les balises HTML d&rsquo;une page peuvent s&rsquo;animer, par exemple un texte, une liste, un div ou m\u00eame une image en fonction de ses besoins.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized logo-jquery\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/03\/Logo_jQuery.png\" alt=\"\" class=\"wp-image-3671\" width=\"310\" height=\"76\" srcset=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/03\/Logo_jQuery.png 413w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/03\/Logo_jQuery-300x73.png 300w\" sizes=\"(max-width: 310px) 100vw, 310px\" \/><figcaption class=\"wp-element-caption\">L\u00e9gende de l&rsquo;image s&rsquo;affichant au survol<\/figcaption><\/figure>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>&lt;script&gt;\n$('.logo-jquery').on('mouseenter', function() {\n  $('.logo-jquery figcaption').fadeIn(250);\n}).on('mouseout', function() {\n  $('.logo-jquery figcaption').fadeOut(150);\n});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<script>\n$('.logo-jquery').on('mouseenter', function() {\n  $('.logo-jquery figcaption').fadeIn(250);\n}).on('mouseout', function() {\n  $('.logo-jquery figcaption').fadeOut(150);\n});\n<\/script>\n<style>\n.wp-block-image.logo-jquery figcaption{display:none;}\n<\/style>\n\n\n\n<p>Gr\u00e2ce \u00e0 jQuery, en quelques lignes de code il est possible de mettre en place des \u00e9couteurs et de lancer une animation tr\u00e8s simplement. Malheureusement ces fonctions ne prennent pas en charge l&rsquo;acc\u00e9l\u00e9ration avec <strong>les fonctions easing<\/strong>. Il est tout \u00e0 fait possible d&rsquo;appliquer un fondu sur tout type d&rsquo;\u00e9l\u00e9ment comme une balise div, un texte ou une image. Ce type d&rsquo;animation peut aussi se faire directement en CSS en appliquant en JS une classe adapt\u00e9e au survol de l&rsquo;\u00e9l\u00e9ment et en la retirant quand il perd le focus ou sur tout autre action de l&rsquo;utilisateur.<\/p>\n\n\n\n<p>La fonction <strong>animate<\/strong> de jQuery ressemble un peu \u00e0 son \u00e9quivalent en pur JavaScript et permet de r\u00e9aliser une animation sur n&rsquo;importe quelle propri\u00e9t\u00e9 CSS num\u00e9rique. On peut ainsi appliquer un effet sur plusieurs propri\u00e9t\u00e9s en m\u00eame temps et la particularit\u00e9 de cette fonction est de pouvoir incr\u00e9menter une valeur au lieu de la d\u00e9finir. La fonction ci-dessous permet de modifier la propri\u00e9t\u00e9 width de l&rsquo;image avec un effet d&rsquo;agrandissement et de r\u00e9tr\u00e9cissement quand on clique sur les boutons.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized logo-js\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/03\/Logo_JS.png\" alt=\"\" class=\"wp-image-3673\" width=\"256\" height=\"256\" srcset=\"https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/03\/Logo_JS.png 256w, https:\/\/jagullo.fr\/blog\/wp-content\/uploads\/2023\/03\/Logo_JS-150x150.png 150w\" sizes=\"(max-width: 256px) 100vw, 256px\" \/><\/figure>\n\n\n\n<div class=\"zone-btn\">\n  <input type=\"button\" class=\"btn btn-plus\" value=\"Agrandir\">\n  <input type=\"button\" class=\"btn btn-moins\" value=\"Diminuer\">\n<\/div>\n<script>\n$('.logo-js').width(200);\n$('.zone-btn input').on('click', function() {\n  if ($(this).hasClass('btn-plus')) {\n    $('.logo-js').animate({width:'+=25px'}, 250);\n  } else if ($(this).hasClass('btn-moins')) {\n    $('.logo-js').animate({width:'-=25px'}, 250);\n  }\n});\n<\/script>\n<style>\n.zone-btn{width:100%;text-align:center;}\n.zone-btn input.btn{display:inline-block;font-size:1rem;border:1px solid #dedede;border-radius:5px;color:#222!important;background-color:#f7f7f7;padding:5px 15px;margin:5px;transition:background-color 200ms ease-in-out;}\n.zone-btn input.btn:hover{background-color:#ececec;}\n<\/style>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>&lt;script>\n$('.zone-btn input').on('click', function() {\n  if ($(this).hasClass('btn-plus')) {\n    $('.logo-js').animate({width:'+=25px'}, 250);\n  } else if ($(this).hasClass('btn-moins')) {\n    $('.logo-js').animate({width:'-=25px'}, 250);\n  }\n});\n&lt;\/script><\/code><\/pre>\n\n\n\n<p>jQuery propose d&rsquo;autres fonctions d&rsquo;animation comme les fonctions <strong>slideUp<\/strong> ou <strong>slideDown<\/strong> pour \u00e9tirer un \u00e9l\u00e9ment ou les fonctions <strong>show<\/strong> et <strong>hide<\/strong>. Cependant ce n&rsquo;est pas une librairie d\u00e9di\u00e9e \u00e0 l&rsquo;animation comme <strong>Anime.js<\/strong> ou <strong>GreenSock<\/strong> qui ont beaucoup plus de fonctionnalit\u00e9s et sont mieux optimis\u00e9es.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">D\u00e9couvrir la librairie Anime.js<\/h2>\n\n\n\n<p>La librairie <a href=\"https:\/\/animejs.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Anime.js<\/a> se pr\u00e9sente comme <strong>un moteur d&rsquo;animation 2D<\/strong> en JS. Elle propose de nombreuses fonctionnalit\u00e9s pour mettre en place des animations plut\u00f4t pouss\u00e9es. Elle prend en charge les easing functions pour modifier l&rsquo;acc\u00e9l\u00e9ration afin de donner des effets encore plus dynamiques. Il est possible de l&rsquo;installer comme un module ES6 qui s&rsquo;incorpore avec Vue.js ou Angular ou en t\u00e9l\u00e9chargeant le fichier compil\u00e9 \u00e0 charger dans sa page HTML.<\/p>\n\n\n\n<p>De <strong>nombreuses options<\/strong> sont disponibles \u00e0 la cr\u00e9ation de la fonction pour bien configurer une animation. On peut y ajouter un d\u00e9lai, une boucle et des fonctions d&rsquo;initialisation ou de fin. Tous les param\u00e8tres sont renseign\u00e9s dans la documentation de la librairie qui est assez bien r\u00e9alis\u00e9e et qui est fournie avec de nombreux exemples.<\/p>\n\n\n\n<div class=\"zone-anim\">\n  <div class=\"square demo-1\"><\/div>\n<\/div>\n<style>\n.zone-anim{width:100%;margin:25px 0;padding:25px;}\n.square{width:25px;height:25px;margin:1px;background-color:#e88b34;}\n<\/style>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>&lt;script&gt;\nanime({\n  targets: '.square.demo-1',\n  delay: 200,\n  translateX: '50%',\n  scale: 2,\n  rotate: '1turn',\n  loop: true,\n  direction: 'alternate',\n  easing: 'easeInOutSine',\n});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Avec le param\u00e8tre <strong>stagger<\/strong> il est possible d&rsquo;animer un ensemble d&rsquo;\u00e9l\u00e9ments via un syst\u00e8me d&rsquo;\u00e9chelonnage pour un rendu tr\u00e8s sympa. On peut animer une s\u00e9rie de mots ou plusieurs div avec des effets originaux. Mais attention sur une configuration mat\u00e9rielle l\u00e9g\u00e8re comme sur mobile, il se peut que les animations soient saccad\u00e9es donc penser \u00e0 tester sur un mobile si des animations sont gourmandes en ressources.<\/p>\n\n\n\n<div class=\"zone-anim zone-squares\">\n  <div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div><div class=\"square demo-2\"><\/div>\n<\/div>\n<style>\n.zone-anim{width:100%;margin:25px 0;padding:25px;}\n.zone-squares{display:flex;justify-content:center;}\n<\/style>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>&lt;script&gt;\nanime({\n  targets: '.square.demo-2',\n  loop: true,\n  scale: &#91;\n    {value: .1, easing: 'easeOutSine', duration: 500},\n    {value: 1, easing: 'easeInOutQuad', duration: 1200}\n  ],\n  delay: anime.stagger(200, {grid: &#91;14, 5], from: 'center'})\n});\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>La propri\u00e9t\u00e9 <strong>keyframe<\/strong> permet de configurer plusieurs mouvements puis de lancer l&rsquo;animation qui va appliquer toutes les transformations sur l&rsquo;objet. En compl\u00e9ment, la m\u00e9thode <strong>timeline<\/strong> peut s&rsquo;utiliser pour synchroniser plusieurs animations sur diff\u00e9rents objets. La librairie <strong>Anime.js<\/strong> est assez compl\u00e8te pour mettre en place des effets dynamiques et modernes. Il faut trouver le bon compromis entre animation et optimisation pour ne pas d\u00e9t\u00e9riorer l&rsquo;exp\u00e9rience utilisateur du site Internet.<\/p>\n\n\n\n<div class=\"zone-anim\">\n  <div class=\"square demo-3\"><\/div>\n<\/div>\n<script>\nwindow.onload = () => {\n  anime({\n    targets: '.square.demo-1',\n    delay: 200,\n    translateX: 250,\n    scale: 2,\n    rotate: '1turn',\n    loop: true,\n    direction: 'alternate',\n    easing: 'easeInOutSine',\n  });\n  anime({\n    targets: '.square.demo-2',\n    loop: true,\n    scale: [\n      {value: .1, easing: 'easeOutSine', duration: 500},\n      {value: 1, easing: 'easeInOutQuad', duration: 1200}\n    ],\n    delay: anime.stagger(200, {grid: [14, 5], from: 'center'})\n  });\n  anime({\n    targets: '.square.demo-3',\n    keyframes: [\n      {translateY: -20},\n      {translateX: 250},\n      {translateY: 20},\n      {translateX: 0}\n    ],\n    duration: 4000,\n    easing: 'easeOutElastic(1, .8)',\n    loop: true\n  });\n};\n<\/script>\n\n\n\n<pre class=\"wp-block-code language-javascript\"><code>anime({\n  targets: '.square.demo-3',\n  keyframes: &#91;\n    {translateY: -20},\n    {translateX: 250},\n    {translateY: 20},\n    {translateX: 0}\n  ],\n  duration: 4000,\n  easing: 'easeOutElastic(1, .8)',\n  loop: true\n});<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Des interfaces modernes<\/h2>\n\n\n\n<p>Amener de l&rsquo;animation sur un site Internet ou une application apporte <strong>de la modernit\u00e9<\/strong> et du dynamisme rendant les pages moins statiques. Dans les sp\u00e9cifications du <a href=\"https:\/\/m2.material.io\/design\/motion\/understanding-motion.html#principles\" target=\"_blank\" rel=\"noreferrer noopener\">material design<\/a>, de nombreuses sections sont consacr\u00e9es au motion qui est une partie int\u00e9grante d&rsquo;une interface r\u00e9ussie. Les retours des interactions utilisateurs, l&rsquo;ouverture d&rsquo;un menu ou l&rsquo;apparition d&rsquo;un modal ou d&rsquo;une sidebar doivent \u00eatre amen\u00e9s de fa\u00e7on anim\u00e9e pour plus de modernit\u00e9. En r\u00e9alisant des animations simples et fluides, on peut am\u00e9liorer facilement l&rsquo;exp\u00e9rience utilisateur d&rsquo;un site Internet sans avoir besoin de recourir \u00e0 du code trop complexe ou difficile \u00e0 maintenir.<\/p>\n\n\n\n<p>Les frameworks JavaScript moderne comme <strong>Angular<\/strong> impl\u00e9mente des fonctions d&rsquo;animation pour sa web application ou son site Internet mais cela reste relativement simple. Utiliser une librairie d\u00e9di\u00e9e comme <strong>Anime.js<\/strong> offre plus de souplesse avec une meilleure marge de man\u0153uvre. Avec des plateformes comme <strong>LottieFiles<\/strong> on peut cr\u00e9er des images anim\u00e9es \u00e0 incorporer dans son site pour compl\u00e9ter le contenu. Entre le motion design et les animations d&rsquo;interfaces, il est possible de r\u00e9aliser des sites Internet ou des applications de qualit\u00e9 en utilisant les bonnes biblioth\u00e8ques.<\/p>\n\n\n\n<link rel=\"stylesheet\" href=\"\/blog\/wp-content\/themes\/Extra-child\/assets\/css\/prism.css\">\n<script src=\"\/blog\/wp-content\/themes\/Extra-child\/assets\/js\/prism.js\"><\/script>\n<script src=\"\/blog\/wp-content\/themes\/Extra-child\/assets\/js\/anime.min.js\"><\/script>\n<div class=\"list-tags\"><a href=\"https:\/\/jagullo.fr\/blog\/tag\/javascript\/\" class=\"link-tag\" title=\"JavaScript\">JavaScript<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>Les animations JavaScript Mettre en place des animations en JavaScript sur des interactions de l&rsquo;utilisateur peut apporter du dynamisme et rendre une page HTML moins statique. Depuis la fin du Flash Player et la d\u00e9mocratisation du responsive web design, les sites sont beaucoup plus classiques. Pour optimiser le r\u00e9f\u00e9rencement, les d\u00e9veloppeurs web et les agences [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3871,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[8],"tags":[33],"class_list":["post-3295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-developpement","tag-javascript","et-has-post-format-content","et_post_format-et-post-format-standard"],"_links":{"self":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/3295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/comments?post=3295"}],"version-history":[{"count":3,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/3295\/revisions"}],"predecessor-version":[{"id":3888,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/posts\/3295\/revisions\/3888"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media\/3871"}],"wp:attachment":[{"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/media?parent=3295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/categories?post=3295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jagullo.fr\/blog\/wp-json\/wp\/v2\/tags?post=3295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}