HTML : animation automatique d'éléments de la page

Il y a deux ou trois ans j'aurais dit : "il faut utiliser JavaScript ! ".
Désormais on peut utiliser CSS depuis la version 3 avec les "keyframes" et les propriétés "animation-...".

Solution traditionnelle : un script

Thème : un plongeur se déplace dans un beau décor corallien.

Le code HTML

... <div style = "display : block ; width : 600px ; height : 400px ; position : relative ; background : url(../images/fond3.jpg) ; margin : auto ; background-size : cover; " > <img id ='plongeur' src ='../images/plongeur3.gif' style = "position : absolute ; top : 350px; left : 500px ; width : 100px; " > </div> </textarea> <p class ="remarque">Attention cette animation n'est pas responsive (largeur de la zone exprimée en pixels). Il est en effet très délicat de créer un script lorsque la zone de déplacement des "sprites" a une largeur exprimée en pourcentage. <p>Notez l'utilisation de la propriété <b>background-size</b> pour que l'image de fond s'ajuste à la taille de la boîte 2D. <br>Un gif animé (ici un plongeur) est positionnée en absolu dans une boîte DIV qui fait 600px par 400px. <br>Un "sprite" doit être une image transparente donc de format gif ou png mais jamais jpg. <h3>Le script</h3> <pre> var zone = document.querySelector('div'); var plongeur = document.querySelector('#plongeur') ; var X = zone.style.width; //largeur zone var Y = zone.style.height; //hauteur zone var x = plongeur.style.left; //positionX du plongeur dans zone var y = plongeur.style.top ; //positionY du plongeur dans zone X =parseInt(X); Y =parseInt(Y); // convertir X et Y en entiers x_maxi = X -100; y_maxi = Y-50 ; // l'image fait 100 par 50 var deltax = 3 ; var deltay = 2 ; // car la zone fait 600 par 400 donc un rapport 3/2 var boucle = setInterval(fdeplacement,50) ; function fdeplacement() { // exécutué toutes les 50 millisecondes donc x = parseInt(x) ; y = parseInt(y) ; if(x > x_maxi || y > y_maxi) {deltax = -deltax ; deltay = -deltay ;} if(x < 0 || y < 0 ) {deltax =-deltax ; deltay =-deltay ; } x+=deltax ; y+=deltay ; x = x+'px' ; y = y+'px' ; plongeur.style.left = x ; plongeur.style.top = y ; } </pre> <p>On utilise les variables x et y mais aussi X,Y, x_maxi et y_maxi car ici le "sprite" ne doit pas sortir de la zone d'animation. <br><b>x_maxi</b> et <b>y_maxi</b> représentent les valeurs maximales de <b>left</b> et <b>top</b> pour que le "plongeur" ne sorte pas du décor. <br>Le gif animé (inséré avec une largeur de 100px) aura une hauteur de 50px (car le ratio entre largeur et hauteur est de 2). <br>Pour que le plongeur ne sorte pas du décor il faut régler <b>x_maxi</b> à X - 100 et <b>y_maxi</b> à Y - 50. <br>Pour calculer <b>x_maxi & y_maxi</b> il faut au préalable convertir X & Y en entiers ! <p><b>var boucle = setInterval(fdeplacement, 50)</b> : signifie que la fonction <b>fdeplacement</b> est exécutée selon une fréquence de 50 millisecondes. La répétition est identifiée par la variable <b>boucle</b>. <br><b>clearInterval(boucle) </b>: met fin à "boucle". <p>Mais en quoi consiste la fonction <b>fdeplacement</b> ? <br>Le plongeur doit se déplacer en diagonale dans les deux sens et sans sortir du décor. <br>Les variables <b>x, y</b> doivent donc alternativement diminuer puis augmenter. <br>Donc les variables <b>deltax, deltay</b> doivent alternativement être négatives puis positives. <br><b>deltax = -deltax</b> et <b>deltay = -deltay</b> : grâce à ces instructions les variables <b>deltay</b> et <b>deltay</b> changent de signe. <br><b>deltax & deltay</b> changent de signe lorsqu'il y a un "effet de bord". Dès que les bords droit ou bas sont atteints ces variables deviennent négatives. Dès que les bords gauche ou haut sont atteints ces variables redeviennent positives.</p> <h2>Solution moderne avec CSS3</h3> <p><b>Thème : deux fondeurs se déplace dans un superbe décor. </b> <br>De plus il y a un effet 3D car les skieurs deviennent de plus en plus petit à mesure qu'ils se déplacent vers la droite. <div id ="container2"> <img src ="../images/fondeur.gif" class ="fondeur" id ="fondeur1"/> <img src ="../images/fondeur2.gif" class ="fondeur" id ="fondeur2" /> </div> <h3>Le code HTML</h3> <textarea readlonly> <div id ="container2"> <img src ="../images/fondeur.gif" class ="fondeur" id ="fondeur1"/> <img src ="../images/fondeur2.gif" class ="fondeur" id ="fondeur2" /> </div> </textarea> <p>Le code HTML est consternant de simplicité. <h3>Le code CSS</h3> <pre> #container2 {width : 100% ; height :500px ; background-image :url(../images/paysage_hiver3.jpg) ; background-size : cover ; border :1px solid black ; position : relative ; perspective : 800px ; perspective-origine : top right; } .fondeur {position:absolute ; left : 0px ; height : 100px; } #fondeur1 {top : 380px ;} #fondeur2 {top : 400px ; } @keyframes deplacer { from{ transform : translateX(0px) translateY(0px) translateZ(0px) ;} to{transform : translateX(1100px) translateY(-150px) translateZ(-600px) ;} } #fondeur1 {animation : deplacer 16s 0s infinite linear ; } #fondeur2 {animation : deplacer 14s 2s infinite linear ; } </pre> <p class ="remarque">Cette fois l'animation est responsive (width :100% ). <p>Notez l'utilisation de la propriété <b>background-size</b> pour que l'image de fond s'ajuste à la taille de la boîte 3D. <br>Il s'agit en effet d'une boite 3D puisque l'axe Z est défini avec les propriétés <b>persepective & perspective-origine</b>. <br>Le modèle d'animation repose sur des transformations et plus précisément des translations. <p class ="remarque">Admettez que c'est beaucoup plus simple en CSS et de plus l'animation est responsive et 3D ! <h2>Utiliser jQuery</h2> <p>Si vous voulez déplacer les "sprites" avec la souris (ou le doigt pour les écrans tactiles) il suffit de créer un script minimaliste basé sur des méthodes de jQueryUI (extension du fameux framework jQuery). <h3>Exemple</h3> <p class ="remarque">Utilisez la souris (ou le doigt) pour déplacer les "sprites". <div id = 'decor' style = "display : block ; width : 100% ; height : 400px ; position : relative ; background : url(../images/fond3.jpg) ; margin : auto ; background-size : cover; " > <img src ='../images/plongeur3.gif' class ="mobile" style = "position : absolute ; top : 350px; left : 90% ; width : 8%;" > <img src ='../images/requin.gif' class ="mobile" style = "position : absolute ; top : 50px; left : 10% ; width : 8%;" > </div> <script> $(".mobile").draggable({containment : "#decor"}); </script> <h3>Le code correspondant</h3> <textarea readlonly> ... <script src ="jquery.js"></script> <script src ="jquery_ui.js"></script> <script src ="jquery_touch_punch.js"></script> </head><body> <div id = 'decor' style = "display : block ; width : 100% ; height : 400px ; position : relative ; background : url(../images/fond3.jpg) ; margin : auto ; background-size : cover; " > <img src ='../images/plongeur3.gif' class ="mobile" style = "position : absolute ; top : 350px; left : 90% ; width : 8%;" > <img src ='../images/requin.gif' class ="mobile" style = "position : absolute ; top : 50px; left : 10% ; width : 8%;" > </div> <script> $(".mobile").draggable({containment : "#decor"}); </script> ... </textarea> <p>Il faut charger la librairie principale de jQuery et son extension "jquery_uijs". <br>Par ailleurs pour pouvoir "dragger" avec le doigt donc pour que l'animation soit compatible avec les écrans tactiles il faut charger une troisième librairie : "jquery_touch_punch.js". Donc en tout trois fichiers .js ! <p>La zone d'animation est responsive (largeur exprimée en pourcentage). <p>Concernant le script je n'en dis pas plus car dans mon site il y a tout un tuto sur <b>JavaScript & jQuery</b> : <a href ="../js/js_menu.htm" class ="en_ligne">Tuto JavaScript & jQuery</a> <h2>Pour aller plus loin</h2> <p>Maintenant si vous voulez dessiner des formes complexes voire les animer vous devez utiliser des "extensions" de HTML5. <br>Sachez que la version 5 de HTML propose deux balises (CANVAS & SVG) qui créent chacune une zone de dessin vide dans la page. <br>On remplit une zone de dessin CANVAS avec un script reposant sur les fonctions haut niveau de l'API Canvas. <br>On remplit une zone de dessin SVG avec des instructions au format SVG. Comme le HTML, le SVG est un langage de balisage. <br><b>Ces zones de dessin peuvent être responsives !</b> <br>On n'a plus besoin de Flash, en combinant HTML, CSS, JavaScript,Canvas ou SVG on peut produire des jeux. <br>Ces deux extensions sont présentées sommairement dans la page suivante. <a href ="html_dessin.htm" class ="en_ligne" >Suivant </a> <br><a href = 'html_menu.htm#menu'>Retour menu </a> <script> var zone = document.querySelector('div'); var plongeur = document.querySelector('#plongeur') ; var X = zone.style.width; var Y = zone.style.height; var x = plongeur.style.left; var y = plongeur.style.top ; X =parseInt(X); Y =parseInt(Y); // convertir X et Y en entiers x_maxi = X -100; y_maxi = Y-50 ; // l'image fait 100 par 50 var deltax = 3 ; var deltay = 2 ; // car la zone fait 600 par 400 donc un rapport 3/2 var boucle = setInterval(fdeplacement,50) ; function fdeplacement() { // exécutué toutes les 50 millisecondes donc x = parseInt(x) ; y = parseInt(y) ; if(x > x_maxi || y > y_maxi) {deltax = -deltax ; deltay = -deltay ;} if(x < 0 || y < 0 ) {deltax =-deltax ; deltay =-deltay ; } x+=deltax ; y+=deltay ; x = x+'px' ; y = y+'px' ; plongeur.style.left = x ; plongeur.style.top = y ; } </script> </body></html>