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

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.

Le script

		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.

Solution moderne avec CSS3

Thème : deux fondeurs se déplace dans un superbe décor.
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.

Le code HTML

Le code HTML est consternant de simplicité.

Le code CSS

	#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 à la taille de la boîte 3D.
Il s'agit en effet d'une boite 3D puisque l'axe Z est défini avec les propriétés persepective & 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 3D !

Utiliser jQuery

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).

Exemple

Utilisez la souris (ou le doigt) pour déplacer les "sprites".

Le code correspondant

Il faut charger la librairie principale de jQuery et son extension "jquery_uijs".
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 !

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

Pour aller plus loin

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