Défilé d'images

Défilé d'images

Le défilés d'images permettent de présenter plusieurs images dans un volume réduit.

Le principe est de déplacer le bloc, contenant les images derrière un cadre qui n'affichera qu'une seule image; après la dernière image, le bloc revient rapidement en position de départ pour afficher la première image.

On peut souhaiter que le mouvement soit plus doux en passant de la dernière image à la première; il faut donc ajouter la première image à la fin de façon à ce qu'elle recouvre de façon invisible, celle en première position.

Nous cachons ce qui dépasse pour ne laisser apparaitre qu'une image (overflow:hidden), que vous pouvez animer au survol.
Comme vous le voyez, nous passons de la dernière image (bleu) à la première image (jaune) de façon rapide.

Code de l'exemple ci-dessus:
<div id="fd1">
<div id="def1">
<p style="width: 150px; height: 75px; background-color: yellow; float: left;"> </p>
<p style="width: 150px; height: 75px; background-color: green; float: left;"> </p>
<p style="width: 150px; height: 75px; background-color: lime; float: left;"> </p>
<p style="width: 150px; height: 75px; background-color: blue; float: left;"> </p>
</div>
</div>

<style type="text/css"></style>

Reprenons la construction de notre montage et ajoutons le première image à la fin, en agrandissant d'autant, le bloc qui la contient; Pour que le temps d'affichage de la première image, recouverte de la même, en dernière position, soit à peu près le même que le temps d'affichage des autres images, le recouvrement dernière/première sera court et réglé par l'animation.

Survolez ce montage pour l'animer; vous constatez que le cycle n'a pas de saccade pour passer de la dernière (jaune) à la première (jaune !) car elles se recouvrent pendant 4% du temps, dans mon exemple.

<div id="fd3">
<div id="def3">
<p style="width: 150px; height: 75px; background-color: yellow; float: left;"> </p>
<p style="width: 150px; height: 75px; background-color: green; float: left;"> </p>
<p style="width: 150px; height: 75px; background-color: red; float: left;"> </p>
<p style="width: 150px; height: 75px; background-color: blue; float: left;"> </p>
<p style="width: 150px; height: 75px; background-color: yellow; float: left;"> </p>
</div>
</div>

<style type="text/css"></style>

Je vais préparer une autre page, pour les valeurs de l'animation, qui sont à calculer selon le nombre d'images de votre montage et selon les temps affichage/translation que vous souhaitez et que vous adapterez sur mes bases.