Diaporama automatisé d'images en CSS et Javascript

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Diaporama animé

Dans le volet précédent, nous avons vu comment créer un diaporama de photos avec les styles Css et le code Javascript. Dans ce nouveau volet, nous souhaitons automatiser ce diaporama. L'utilisateur ne doit plus avoir à cliquer pour faire défiler les images.



Sur l'exemple illustré par la capture, les images s'enchaînent toutes les deux secondes et demie. Et chacune, en remplaçant la précédente, est accompagnée d'un effet d'animation.

Sources de développement
Pour la mise en place de cette nouvelle astuce Css, nous suggérons d'appuyer nos travaux sur une page Web déjà bien ébauchée.

• Télécharger le fichier compressé diaporama-anime.rar en cliquant sur ce lien,
• Puis, le décompresser dans le dossier de votre choix,

Le fichier de la page Web se nomme index.htm. Il est accompagné de ses ressources dans les sous dossiers. On note notamment la présence des feuilles de styles dans le sous dossier Css et des photos dans le sous dossier img.

• Double cliquer sur le fichier index.htm pour l'exécuter dans le navigateur par défaut,

Comme vous pouvez le voir, le rendu est loin de nos attentes à ce stade. Les images sont toutes affichées les unes sous les autres alors qu'elles devraient être empilées les unes sur les autres. Nous le verrons, c'est l'intervention du code Javascript qui permettra de régler ce problème en déterminant celle qui doit être affichée au détriment des autres. Enfin, vous remarquez qu'elles sont toutes accueillies par un cadre aux bords arrondis. Et la hauteur de ce dernier s'adapte à la dimension de son contenu.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.htm,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

Nous accédons ainsi à la structure Html de la page Web. Les feuilles de styles sont référencées en entête de code. Celle qui nous intéresse est nommée les-styles.css. Et comme l'indique son chemin relatif, elle est bien située dans le sous dossier local Css. La portion qui nous intéresse est située plus bas dans le code. Elle est intégrée dans un calque (balise Div) d'identifiant auCentre, hébergeant lui-même un autre calque associé à un style (class) nommé lesImg :

...
<div id="contenu">
<div id="auCentre">

<div class="lesImg">
<img class="diapo animation-haut" src="img/photo1.jpg">
<img class="diapo animation-gauche" src="img/photo2.jpg">
<img class="diapo animation-basGauche" src="img/photo3.jpg">
<img class="diapo animation-droite" src="img/photo4.jpg">
</div>

</div>
</div>
...

Il y a quatre images hébergées chacune par une balise Html img. Elles possèdent toutes deux styles Css. Le premier, nommé diapo, est commun. Il se charge simplement des dimensions et des effets d'arrondi. Le second est propre à chacune. Aucun de ces derniers styles n'existe encore. Ils doivent définir les effets d'apparition des photos.

Encore plus bas dans le code, vous notez la présence d'une section de script avec une amorce de développement :

...
<script type="text/javascript" language="javascript">
var position = 0;
diaporama();

function diaporama()
{

}
</script>
...

Une variable (position) est déclarée et affectée à la valeur zéro. Cette variable est publique. Elle va donc porter sa valeur. Puis, une fonction est appelée. Et cette fonction diaporama est introduite juste en-dessous. C'est elle que nous devons implémenter pour faire défiler les photos en respectant un délai précis entre chacune. Telle qu'elle est inscrite en effet, elle est destinée à se lancer automatiquement au chargement de la page Web.

• De nouveau à la racine du dossier de décompression, double cliquer sur le sous dossier Css,
• Dès lors, cliquer droit sur la feuille de styles les-styles.css,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad++,

Les styles lesImg et diapo sont déjà présents. Tous les seconds styles associés aux images sont manquants en revanche et naturellement, nous y reviendrons.

Parcourir les photos
Maintenant, l'objectif premier consiste à masquer toutes les photos pour ne conserver que la première à l'affichage. C'est ainsi que nous pourrons ensuite entreprendre de les faire apparaître les unes après les autres.

• Revenir sur la feuille de code de la page index.htm,
• Dans la fonction diaporama, ajouter les deux premières instructions Javascript suivantes :

var i;
var x = document.getElementsByClassName("diapo");

Nous déclarons tout d'abord une variable de boucle (i). Nous l'utiliserons pour passer en revue toutes les photos associées au style diapo. Puis, nous exploitons la méthode getElementsByClassName de l'objet Javascript document. Avec la valeur diapo en paramètre, elle récupère toutes les balises img associées à ce style. Il en résulte un tableau de variables (x) dans lequel tous ces éléments sont rangés dans des lignes différentes. C'est grâce à lui que nous allons pouvoir passer en revue toutes les images tour à tour. Il convient donc d'initialiser la boucle en question.

• A la suite du code de la fonction diaporama, créer la boucle suivante :

for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}

Nous parcourons donc toutes les images (i++) stockées dans le tableau, de la première (i = 0) à la dernière (x.length). En effet, la propriété length renvoie la dimension d'un tableau de variables. Et pour chacune, nous fixons l'attribut Css display sur la valeur none. En d'autres termes, nous les masquons toutes. Mais ne l'oublions pas, l'une d'entre elles doit rester visible. Au premier chargement de la page, il s'agit naturellement de la première.

• A la suite de la boucle, ajouter l'instruction Javascript suivante :

x[position].style.display = "block";

La variable position est initialisée sur la valeur zéro. Avec la valeur block affectée à l'attribut Css display de l'image concernée, nous l'affichons dans le flux de la page Web.

• Enregistrer les modifications (CTRL + S) et revenir sur la page Web,
• Puis, actualiser le cache du navigateur (CTRL + F5),

Comme vous pouvez le voir, seule une image subsiste à l'affichage. Les autres sont masquées. Lorsqu'un élément n'est pas visible, il laisse ceux du dessous remonter à sa hauteur. C'est ainsi que nous allons pouvoir alterner les apparitions en lieu et place, soit dans le cadre redimensionné à la hauteur précise de la photo.

Maintenant, il est question de les faire défiler les unes après les autres.

• Revenir dans l'éditeur Notepad++,
• A la suite de la fonction diaporama, ajouter les deux instructions Javascript suivantes :

position++;
if (position > x.length-1) {position = 0}

A chaque passage dans la fonction, nous incrémentons donc la valeur de la photo à afficher (position++). Et si cette position dépasse la borne supérieure du tableau de variables qui les stocke (position > x.length-1), nous revenons sur la première image (position = 0).

Mais sur ce procédé, pour que les images défilent, faut-il encore que la fonction diaporama soit appelée en boucle. Pour cela, Javascript propose une fonction totalement dédiée. Elle se nomme setTimeout. Elle permet d'engager des traitements à intervalles de temps réguliers. Ces traitements ne sont autres que ceux de la fonction diaporama.

• Toujours à la suite du code de la fonction diaporama, ajouter l'instruction Javascript suivante :

setTimeout(diaporama, 2500);

Cette fonction permet donc de marquer une pause de 2500 millisecondes (2,5 secondes) avant de rappeler périodiquement la fonction diaporama dont le nom est passé en premier argument.

Si vous enregistrez les modifications et que vous actualisez la page Web, vous constatez en effet que toutes les photos défilent les unes après les autres en respectant un délai de deux secondes et demie. Et lorsque la dernière image est atteinte, le diaporama se poursuit en reprenant à partir de la première. Mais à ce stade, il manque encore de fantaisie.

Le code Javascript complet de la fonction que nous avons développée est le suivant :

function diaporama()
{
var i;
var x = document.getElementsByClassName("diapo");

for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
x[position].style.display = "block";
position++;
if (position > x.length-1) {position = 0}
setTimeout(diaporama, 2500);
}

Effets d'animation
Pour poursuivre, nous choisissons donc d'invoquer les styles Css. Ils doivent permettre de réaliser des effets d'animation sur les images appelées. Et pour cela, nous devons paramétrer chaque second style affecté aux balises img, celles des photos.

• Revenir dans l'éditeur Notepad++, mais cette fois sur la feuille de styles les-styles.css,
• A la suite du style diapo, créer le style animation-haut comme suit :

.animation-haut
{
position:relative;
animation:animerHaut 0.4s;
}

Très simplement, nous définissons tout d'abord un positionnement relatif de l'image dans son calque. Puis, nous paramétrons une animation, grâce à l'attribut Css animation. En premier paramètre, nous définissons son nom, et en second, sa durée.

Grâce à ce nom, nous allons pouvoir créer un kerframes. Nous les avons déjà abordés ensemble. Ils permettent de régler les étapes de l'animation reconnue par son nom. Ici en guise d'étapes, nous souhaitons simplement définir l'état au départ et l'état à l'arrivée, sachant que la transition doit se jouer sur 0,4 seconde. Au départ, l'image doit être en dehors du cadre. A l'arrivée elle doit y être parfaitement incrustée.

• A la suite du style, ajouter le keyFrames suivant :

@keyframes animerHaut
{
from{top:-300px;opacity:0}
to{top:0px;opacity:1};
}

En paramètre, nous lui passons tout d'abord le nom de l'animation à configurer. Ensuite, les étapes sont annoncées par les mots clés from et to. Ils permettent de régler autant d'attributs que souhaités. Au départ (from), l'image est située 300 pixels au-dessus et doit être transparente (opacity:0). A l'arrivée, soit au bout de 0,4 seconde, elle doit entrer dans le cadre (top:0px) et doit avoir recouvré son opacité (opacity:1).

A ce stade, si vous enregistrez les modifications et que vous actualisez le cache du navigateur, seule la première photo est dotée d'un effet. Les autres continuent de s'enchaîner on ne peut plus classiquement. Il convient donc de créer les autres styles Css et de les piloter par des keyFrames associés.

• A la suite des styles, ajouter les instructions Css suivantes :

.animation-gauche
{
position:relative;
animation:animerGauche 0.4s;
}
@keyframes animerGauche
{
from{left:-300px;opacity:0}
to{left:0px;opacity:1};
}

Cette fois, nous faisons entrer la deuxième image par la gauche.

• A la suite des styles, ajouter les instructions Css suivantes :

.animation-basGauche
{
position:relative;
animation:animerBasGauche 0.4s;
}
@keyframes animerBasGauche
{
from{bottom:-300px;left:-300px;opacity:0}
to{bottom:0px;left:0px;opacity:1};
}

Maintenant, nous faisons intervenir la troisième photo par le bas et la gauche.

• A la suite des styles, ajouter les instructions Css suivantes :

.animation-droite
{
position:relative;
animation:animerDroite 0.4s;
}
@keyframes animerDroite
{
from{right:-300px;opacity:0}
to{right:0px;opacity:1};
}

Enfin, nous faisons apparaître la dernière image par la droite.

• Enregistrer les modifications et revenir sur la page Web,
• Actualiser le cache du navigateur (CTRL + F5),

Comme vous pouvez l'apprécier, notre diaporama prend vie. Et grâce au code Javascript parcourant chaque image, autant de photos que souhaité peuvent être ajoutées. C'est la raison pour laquelle deux images supplémentaires sont prévues dans le sous dossier img (photo5.jpg et photo6.jpg). Il suffit de les intégrer à la suite dans deux nouvelles balises img, tout en leur associant des styles soit identiques, soit différents :

...
<div class="lesImg">
<img class="diapo animation-haut" src="img/photo1.jpg">
<img class="diapo animation-gauche" src="img/photo2.jpg">
<img class="diapo animation-basGauche" src="img/photo3.jpg">
<img class="diapo animation-droite" src="img/photo4.jpg">
<img class="diapo animation-haut" src="img/photo5.jpg">
<img class="diapo animation-hautDroite" src="img/photo6.jpg">
</div>
...

Puis, il s'agit de créer le ou les nouveaux styles éventuels :

.animation-hautDroite
{
position:relative;
animation:animerhautDroite 0.4s;
}
@keyframes animerhautDroite
{
from{top:-300px;
right:-300px;opacity:0}
to{top:0px;
right:0px;opacity:1};
}



Après enregistrement et actualisation du cache du navigateur, vous constatez que le diaporama s'est automatiquement adapté à ce nouveau contenu.