html5 tutorial : scrolling horizontal en html5 et javascript




 

Je continue ma série de tutoriels html5 et Javascript avec un article sur le scrolling horizontal en particulier. Le scrolling va vous permettre de faire des animations html5, notamment animer un fond d’écran. Pour le scrolling vertical, les principes exposés sont les mêmes. Je vous montre pas à pas et en détail comment réaliser un scrolling.

 

Prérequis

– pour ceux qui ne connaissent pas le canvas HTML5, avoir lu l’article Comprendre le Canvas html5
– au moins un navigateur compatible sous la main;
– savoir ce qu’est le code html et en avoir pratiqué un peu;
– savoir ce qu’est le code Javascript et en avoir pratiqué un peu.

 

Principes du scrolling horizontal

Imaginez, comme ci-dessous, que vous regardiez une photo panoramique de grande dimension, d’environ de 10 mètres sur 2, et que vous n’ayez pas suffisamment de recul pour la voir entièrement.

Dans ce cas précis, votre vue va se focaliser sur une partie de la photo et vous allez devoir la parcourir avec les yeux, de la gauche vers la droite ou inversement, pour en voir tous les éléments. Vous n’allez voir qu’une partie de l’image à la fois, jamais entièrement.

En parcourant la photo, vous voyez d’abord
 

Puis
 

Puis
 

Et enfin
 

 
Le principe du scrolling relève du même principe sauf que ce qui est affiché à l’écran est le pendant de votre vue représenté par la canvas HTML5, et la photo panoramique est l’image qui va scroller (défiler) à l’écran.

 

Mise en oeuvre du scrolling html5

Nous allons faire défiler dans le canvas HTML5, notre image panoramique en boucle : lorsque l’image panoramique aura scrollé complètement, nous la ferons scroller une nouvelle fois, le tout indéfiniment.

 
Illustration :

 

Initialisation du projet html et javascript

– Créez un dossier scrollingHTML5 qui sera la racine de notre projet;
– dans ce dossier créez un dossier img qui sera dédié au stockage de notre image panoramique;
– toujours dans le dossier scrollingHTML5, créez le fichier scrolling_canvas_html5.html.

Le fichier scrolling_canvas_html5.html contiendra le code html5 et le code javascript.

 

Le codage du scrolling HTML5

L’image que nos choisissons a comme dimensions 4000×494 pixels. Du fait de ces dimensions, nous créons un canvas ayant la même hauteur height (494 pixels), mais d’une longueur width inférieure à 4000 pixels. Nous choisissons arbitrairement 1000 pixels.

 

Initialisation du canvas html5

Editez le fichier scrolling_canvas_html5.html, et déclarez le canvas html5 comme suit :

<html>
 <body>
  <canvas id="canvasScrolling" style="border: 1px solid #000000" width="1000" height="494">
   Canvas HTML5 non supporté
  <canvas>
 <body>
</html>

Nous faisons apparaître la bordure du canvas html5 par le biais du style :

border: 1px solid #000000

Puis nous créons une fonction dans le code javascript que nous nommons initialisation et qui sera appelée à l’ouverture de la page scrolling_canvas_html5.html.

L’appel se fera par le biais de l’évènement Javascript load (chargement) comme suit :

window.addEventListener('load', function() {
	initialisation();
});

Cette fonction affecte à une variable globale nommée canvasScrolling, un objet Canvas à partir de celui qui est déclaré dans le code html5.

Nous éditons le fichier scrolling_canvas_html5.html, puis nous ajoutons juste après la balise , le code Javascript suivant encapsulé dans par les balises script et /script:

var canvasScrolling;
var canvasScrolling2DContext;
var initialisation = function() {
 canvasScrolling = document.getElementById('canvasScrolling');
 canvasScrolling2DContext = canvasScrolling.getContext('2d');
}

 

Initialisation et affichage de l’image panoramique

Pour l’image panoramique, nous créons la variable globale imagePanoramique à laquelle nous affections un objet javascript Image, auquel nous associons le fichier image panoramique.jpg.

var imagePanoramique;
imagePanoramique = new Image();
imagePanoramique.src = "./src/panoramique.jpg";

Puis nous l’affichons dans le canvas HTML5, aux coordonnées (0,0), le coin haut gauche du canvas html5 :

var imagePanoramique;
var imagePanoramiqueX = 0;
var imagePanoramiqueY = 0;
imagePanoramique = new Image();
imagePanoramique.src = "./img/panoramique.jpg";
canvasScrolling2DContext.drawImage(imagePanoramique,imagePanoramiqueX,imagePanoramiqueY);

Au final, le code est :

<html>
 <script>
var canvasScrolling;
var canvasScrolling2DContext;
var imagePanoramique;
var imagePanoramiqueX = 0;
var imagePanoramiqueY = 0;
var initialisation = function() {
 canvasScrolling = document.getElementById('canvasScrolling');
 canvasScrolling2DContext = canvasScrolling.getContext('2d');
 imagePanoramique = new Image();
 imagePanoramique.src = "./img/panoramique.jpg";
 canvasScrolling2DContext.drawImage(imagePanoramique,imagePanoramiqueX,imagePanoramiqueY);
}

window.addEventListener('load', function() {
	initialisation();
});
 </script>
 <body>
  <canvas id="canvasScrolling" style="border: 1px solid #000000" width="1000" height="494">
   Canvas HTML5 non supporté
  <canvas>
 <body>
</html>

 

Codage du scrolling javascript html5

Le principe va simplement consister à faire varier l’abscisse (coordonnées X) de l’image, puis à la réafficher en ayant préalablement effacer le canvas html5.

Comme nous souhaitons faire scroller l’image de la droite vers la gauche, nous allons décrémenter son abscisse.

Nous créons une nouvelle fonction nommée scrollingHorizontal comme suit :

var scrollingHorizontal = function () {
 // on décrémente de un pixel l'abscisse de l'image
 imagePanoramiqueX-=10;
 // on efface le canvas
 canvasScrolling2DContext.clearRect(0, 0, canvasScrolling.width, canvasScrolling.height);
 // on réaffiche le canvas
 canvasScrolling2DContext.drawImage(imagePanoramique,imagePanoramiqueX,imagePanoramiqueY);
}

Il ne reste plus qu’à appeler cette fonction en boucle pour activer le scrolling html5. Pour cela, on utilise la fonction Javascript setInterval qui permet d’appeler une fonction donnée, à une fréquence déterminée en millisecondes. Le premier paramètre étant le nom de la fonction et le second la fréquence.

Dans notre cas, nous l’utilisons comme suit pour appeler la fonction scrollingHorizontal toutes les 50 millisecondes :

setInterval(scrollingHorizontal, 50); 

Le code complet donne :

<html>
 <script>
var canvasScrolling;
var canvasScrolling2DContext;
var imagePanoramique;
var imagePanoramiqueX = 0;
var imagePanoramiqueY = 0;
var initialisation = function() {
 canvasScrolling = document.getElementById('canvasScrolling');
 canvasScrolling2DContext = canvasScrolling.getContext('2d');
 imagePanoramique = new Image();
 imagePanoramique.src = "./img/panoramique.jpg";
 canvasScrolling2DContext.drawImage(imagePanoramique,imagePanoramiqueX,imagePanoramiqueY);
}

var scrollingHorizontal = function() {
 imagePanoramiqueX-=10;
 canvasScrolling2DContext.clearRect(0, 0, canvasScrolling.width, canvasScrolling.height);
 canvasScrolling2DContext.drawImage(imagePanoramique,imagePanoramiqueX,imagePanoramiqueY);
}

window.addEventListener('load', function() {
 initialisation();
 setInterval(scrollingHorizontal, 50); 
});

 </script>
 <body>
  <canvas id="canvasScrolling" style="border: 1px solid #000000" width="1000" height="494">
   Canvas HTML5 non supporté
  <canvas>
 <body>
</html>

Pour voir la démo du scrolling html5, cliquez ici.

 

Ce n’est pas terminé

En effet, si vous laissez aller le scrolling jusqu’au bout, vous constatez qu’il ne se fait pas en boucle : le bout de l’image atteint, c’est un gros blanc qui apparaît.

Pour résoudre ce problème, il nous faut réafficher la même image à la suite de la première. Nous utilisons la même instance imagePanoramique.

Pour éviter le fameux blanc, nous allons faire défiler 2 images (deux fois la même) l’une derrière l’autre. Lorsqu’une des deux images sortira de l’écran (canvas), elle sera replacée derrière l’autre et ainsi de suite indéfiniment.

La fonction initialisation évolue pour intégrer cette deuxième image qui sera placée à la droite de la première. L’abscisse de la deuxième image sera égale à la longueur de la première. Les ordonnées sont identiques puisque le scrolling est horizontal.

var initialisation = function() {
 canvasScrolling = document.getElementById('canvasScrolling');
 canvasScrolling2DContext = canvasScrolling.getContext('2d');
 imagePanoramique = new Image();
 imagePanoramique.src = "./img/panoramique.jpg";
 canvasScrolling2DContext.drawImage(imagePanoramique,imagePanoramiqueX,0);
 imagePanoramique2X = 4000;
 canvasScrolling2DContext.drawImage(imagePanoramique,imagePanoramique2X,0);
}

Puis c’est au tour de la fonction scrollingHorizontal d’évoluer : elle fait en sorte que lorsqu’une des images sort de l’écran, elle est replacée derrière l’autre.

var scrollingHorizontal = function() {
 canvasScrolling2DContext.clearRect(0, 0, canvasScrolling.width, canvasScrolling.height);
 imagePanoramiqueX -= 10;
 if ( imagePanoramiqueX < -imagePanoramique.width ) {
  imagePanoramiqueX = imagePanoramique.width - 10;
 }
 canvasScrolling2DContext.drawImage(imagePanoramique, imagePanoramiqueX, 0);
 imagePanoramique2X -= 10;
 if ( imagePanoramique2X < -imagePanoramique.width ) {
  imagePanoramique2X = imagePanoramique.width - 10;
 }
 canvasScrolling2DContext.drawImage(imagePanoramique, imagePanoramique2X, 0);
}

La même chose en mieux :

var scrollingHorizontal = function()  {
 canvasScrolling2DContext.clearRect(0, 0, canvasScrolling.width, canvasScrolling.height);
 imagePanoramiqueX = scrollImage(imagePanoramique, imagePanoramiqueX, 0, 10);
 imagePanoramique2X = scrollImage(imagePanoramique, imagePanoramique2X, 0, 10);
}

var scrollImage = function(image, x, y, step) {
 console.debug(x);
 x -= step;
 if ( x < -image.width ) {
  x = image.width - step;
 }
 canvasScrolling2DContext.drawImage(image, x, 0);
 return x;
}

Pour la démo en live, c’est ici.

Le code complet :

<html>
 <script>
var canvasScrolling;
var canvasScrolling2DContext;
var imagePanoramique;
var imagePanoramiqueX = 0;
var imagePanoramique2;
var imagePanoramique2X = 4000;
var initialisation = function() {
 canvasScrolling = document.getElementById('canvasScrolling');
 canvasScrolling2DContext = canvasScrolling.getContext('2d');
 imagePanoramique = new Image();
 imagePanoramique.src = "./img/panoramique.jpg";
 canvasScrolling2DContext.drawImage(imagePanoramique,imagePanoramiqueX,0);
 canvasScrolling2DContext.drawImage(imagePanoramique,imagePanoramique2X,0);
}

var scrollingHorizontal = function() {
 canvasScrolling2DContext.clearRect(0, 0, canvasScrolling.width, canvasScrolling.height);
 imagePanoramiqueX = scrollImage(imagePanoramique, imagePanoramiqueX, 0, 10);
 imagePanoramique2X = scrollImage(imagePanoramique, imagePanoramique2X, 0, 10);
}

var scrollImage = function(image, x, y, step) {
 console.debug(x);
 x -= step;
 if ( x < -image.width ) {
  x = image.width - step;
 }
 canvasScrolling2DContext.drawImage(image, x, 0);
 return x;
}

window.addEventListener('load', function() {
 initialisation();
 setInterval(scrollingHorizontal, 50); 
});

 </script>
 <body>
  <canvas id="canvasScrolling" style="border: 1px solid #000000" width="1000" height="494">
   Canvas HTML5 non supporté
  <canvas>
 <body>
</html>

 

Un petit mot sur le scrolling vertical

Le principe du scrolling vertical est identique au scrolling horizontal, à la différence que l’on fait varier l’ordonnée des images qui défilent au lieu de leur abscisse.

 

Conclusion

Vous avez les clés pour faire vos propres scrolling, il n’y a plus qu’à. Si des choses ne vous semblaient pas clairs dans mon propos, demandez moi, je répondrai avec plaisir.

 
[important]Si vous avez aimé cet article, partagez le.[/important]

 
[important]Si vous faites déjà vos propres scrolling, dites nous avec quoi et comment vous le faites.[/important]

 

Posté dans html5Taggé animation html, animation html5, comment faire un jeux, créer un jeu, défilement image html5, faire des jeux, faire des jeux html, html et javascript, HTML5, html5 games, html5 tutorial, html5 tutoriel, javascript, jeu d'arcade html, jeu video html, scrolling, scrolling horizontal, scrolling horizontal en javascript, scrolling html5, scrolling javascript, scrolling vertical  |  9 commentaires

9 réponses à "html5 tutorial : scrolling horizontal en html5 et javascript"

Répondre

*