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-...".
Thème : un plongeur se déplace dans un beau décor corallien.
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.
Notez l'utilisation de la propriété background-size pour que l'image de fond s'ajuste à la taille de la boîte 2D.
Un gif animé (ici un plongeur) est positionnée en absolu dans une boîte DIV qui fait 600px par 400px.
Un "sprite" doit être une image transparente donc de format gif ou png mais jamais jpg.
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 ;
}
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.
x_maxi et y_maxi représentent les valeurs maximales de left et top pour que le "plongeur" ne sorte pas du décor.
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).
Pour que le plongeur ne sorte pas du décor il faut régler
x_maxi à X - 100 et y_maxi à Y - 50.
Pour calculer x_maxi & y_maxi il faut au préalable convertir X & Y en entiers !
var boucle = setInterval(fdeplacement, 50) : signifie que la fonction fdeplacement est exécutée selon une
fréquence de 50 millisecondes. La répétition est identifiée par la variable boucle.
clearInterval(boucle) : met fin à "boucle".
Mais en quoi consiste la fonction fdeplacement ?
Le plongeur doit se déplacer en diagonale dans les deux sens et sans sortir du décor.
Les variables x, y doivent donc alternativement diminuer puis augmenter.
Donc les variables deltax, deltay doivent alternativement être négatives puis positives.
deltax = -deltax et deltay = -deltay : grâce à ces instructions les variables deltay et deltay changent
de signe.
deltax & deltay 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.
Thème : deux fondeurs se déplacent dans un superbe décor.
De plus il y a un effet de perspective, les skieurs deviennent de plus en plus petits à mesure qu'ils se déplacent vers la droite.
Le code HTML est consternant de simplicité.
#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 ; }
Cette fois l'animation est responsive (width :100% ).
Notez l'utilisation de la propriété background-size pour que l'image de fond s'ajuste parfaitement à la taille de la boîte.
Il s'agit d'une boite 3D puisque l'axe Z est défini avec les propriétés perspective & perspective-origine.
Le modèle d'animation repose sur des transformations et plus précisément des translations.
Admettez que c'est beaucoup plus simple en CSS et de plus l'animation est responsive et elle est en 3D !
Si vous voulez que l'internaute puisse 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).
Utilisez la souris (ou le doigt) pour déplacer les acteurs (plongeur ou requin) de cette scène palpitante.
Il faut charger la librairie principale de jQuery et son extension "jquery_uijs".
Par ailleurs pour pouvoir "dragger" (glisser) 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 jQuery.
La zone d'animation est responsive (largeur exprimée en pourcentage).
Concernant le script je n'en dis pas plus car dans mon site il y a tout un tuto sur JavaScript & jQuery : Tuto JavaScript & jQuery
Maintenant si vous voulez dessiner des formes complexes voire les animer vous devez utiliser des "extensions" de HTML5.
Sachez que la version 5 de HTML propose deux balises (CANVAS & SVG) qui créent chacune une zone de dessin vide dans la page.
On remplit une zone de dessin CANVAS avec un script reposant sur les fonctions haut niveau de l'API Canvas.
On remplit une zone de dessin SVG avec des instructions au format SVG. Comme le HTML, le SVG est un langage de balisage.
Ces zones de dessin peuvent être responsives !
On n'a plus besoin de Flash, en combinant HTML, CSS, JavaScript,Canvas ou SVG on peut produire des jeux.
Ces deux extensions sont présentées sommairement dans la page suivante. Suivant
Retour menu