La technique consiste à charger toute les images d’une animation et de n’en afficher qu’une seul. Ensuite, de déplacer le fond de manière à faire apparaitre la seconde image, puis la troisième, etc … pour donner ainsi l’illusion de mouvement. Ceci peut-être répéter à l’infinie.
Ici un exemple de code, donnant l’illusion d’un personnage qui marche:

L’image de départ pour cette animation:

Il est aisé de deviner que suivant la position du fond, avec cette planche de dessin, nous pourrons donner l’illusion de quatre déplacements différents pour ce personnage.
Par la suite…..
Deux animation, le texte, et le personnage plus la suite du texte, déclenchés par un clique sur le bouton.
Testez vous même!
N’hésitez pas à réactualiser la page pour voir le début de l’animation.



Le fichier js:
