Animer un décor avec un travelling en html et javascript (jquery)

Vous avez déjà pensé à réaliser un travelling pour votre site, mais l'idée vous à paru trop complexe, trop gourmande en ressource, ou bien vous vous sentiez obligé de passer par flash? Que néni ! Réaliser un travelling en plein écran c'est facile ! Et cela se prête à plein d'utilisations possible. Que ce soit comme animation d'arrière plan, ou dans le cadre d'une interactivité poussée, il est aujourd'hui aisée de faire un travelling avec Javascript.

J'utilise personnellement la librairie Jquery, qui permet d'animer des éléments du DOM avec une simplicité déconcertante. Mais alors, comment fait on ? C'est le sujet de ce micro tutoriel.

Pour bien faire il faut créer une structure basique pour son site avec quelques balises div. Les div sont des conteneurs qui par défaut se positionnent les un en dessous des autres. Ici il n'est point question de se prendre la tête avec le placement de ces div. Il n'y en a que deux ! Le premier div est en fait un conteneur global, c'est à l'intérieur de celui-ci que va se produire l'animation du travelling. Son rôle est de créer une zone de visibilité (ici égale a la taille totale de la fenêtre).

Voici son style css : 

position:absolute; /* le bloc aura une position fixe */

width:100%; /* il occupera toute la largeur de la fenêtre*/

height:100%; /* ainsi que toute sa hauteur */

overflow:hidden; /* tout ce qui dépassera les dimension de la fenêtre sera masqué, et il n'y aura pas d'ascenseur */

A l'intérieur nous y trouverons un autre div, celui qui contiendra directement l'image de background. C'est ce div qui sera animé et qui donnera l'impression de travelling.

style css : 

position: relative /* nécessaire pour que l'animation fonctionne */

A l'intérieur de ce div, nous insérerons notre image, avec la balise img. L'image que vous placerez devra avoir une longueur conséquente (la mienne fait 2560 de long soit le double de ma largeur d'écran).

Voila rien de plus pour les éléments, si on récapitule nous avons 2 blocs et une image. Chacun étant imbriqué dans l'autre ce qui nous donne quelque chose comme ceci : 

div

div

img

/div

/div

Voila, je vous conseille également de mettre ce style à votre body{

margin:0;

padding:0;

}

Cela évitera qu'il y ai des bordures noires sur les cotés de votre navigateur.

Maintenant place à l'animation !

L'animation va se faire grâce à un tout petit script Jquery. Je vous conseille de jeter un coup d'oeil à cette librairie javascript qui recèle de petites astuces bien sympa.

Dans un premier temps, il faut bien sur que vous télécharger le .js de jquery, et que vous le rangier bien soigneusement non loin de votre page html pour pouvoir y accéder avec la balise script type="text/javascript" src="js/jquery-1.4.4.js"

Voici ensuite le code javascript qui fera bouger votre décors ( à taper à l'intérieur de balise script bien sur ) : 

$(document).ready(function(){

jQuery.fx.interval = 20;

$('#bkgd').animate({

   left: '-=100%'

}, 2000);

});

Ahhh qu'est ce que cela veut dire (pour les non initiés ;p )

jQuery.fx.interval = 20; /* question de performances, je limite le nombre d'images par secondes à 50 img/sec (1000/20 = 50)*/

$('#bkgd').animate est la méthode qui permet d'animer en Jquery, ici nous allons demandé à notre bloc div contenant l'image, et dont la propriété id est égale à "bkgd" de translater vers la gauche, l'équivalent de la largeur de la fenêtre du navigateur : left: '-=100%' en 2 secondes.

Voilà alors bien sur, cette explication n'est que le décriptif de toute cette opération, et il se peut que vous ne réussissiez pas à faire un travelling fonctionnel avec ça, sinon c'est que vous êtes bon et tant mieux pour vous :p

Je vous invite donc à jeter un coup d'oeil aux sources, et à vous rendre compte par vous même du type de rendu que l'on peut obtenir. Bon courage