Les défilés.

Les défilés.

Le défilé d'image(s) ou de texte est un déplacement d'un positionnement à un autre, qui peut aussi s'écrire par un code CSS. Ainsi, l'élément défilant apparaîtra, par exemple, à droite pour disparaître à gauche, selon la vitesse que vous aurez définie et recommencera ce cycle. De préférence, il faut connaître la longueur du déplacement et donc la largeur ou la hauteur de votre page ou de votre cadre. Dans le cas de cadres ou de zones limités en largeur, nous ferons disparaître ces images ou texte par un attribut qui cache ce qui dépasse: overflow:hidden; Premier exemple de base: votre cadre mesure 700px de large et 100px de haut; l'élément défilant fait 70x50px et parcourt la largeur en 5 secondes. L'élément va être placé hors du cadre à droite, donc à 700px du bord gauche et de traversera le cadre pour disparaître à gauche, de sa largeur, soit -70px du bord gauche.

ad img

<div style="width: 700px; height: 50px; border: 1px solid black; line-height: 100px; overflow: hidden; margin: 10px auto;">
<p id="t1">ad img</p>
</div>
<style></style>

Si vous souhaitez placer plusieurs images, vous devrez leur donner une hauteur définie et un espace défini entre chaque; vous pourrez leur donner une class, qui contiendra leurs attributs communs.

<div style="width: 700px; height: 100px; border: 1px solid black; line-height: 100px; overflow: hidden; margin: 10px auto;">
<p id="t1a"><img class="gm" src="http://ekladata.com/Dggj3pRlxkOyIU-jW3Q6zZp5dzA@100x100.gif" alt="" /><img class="gm" src="http://ekladata.com/0fW00GoqwJ6280_OPSw53-evIjQ@100x100.gif" alt="" /></p>
</div>
<style></style>

Le mouvement peut être vertical, dans un cadre plus haut, pour mon exemple.

<div style="width: 700px; height: 300px; border: 1px solid black; overflow: hidden; margin: 10px auto;">
<p id="t1b"><img class="gm1" src="http://ekladata.com/rQPPkokJaXn8uLfpkt0cccxyl9w@100x100.gif" alt="" /><br /><img class="gm1" src="http://ekladata.com/jfRfoQVLKOKB8tkoksdW7CjGghU@100x100.gif" alt="" /></p>
</div>
<style></style>

Ces codes nous permettent des défilés qui repartent à zéro à chaque cycle; nous pouvons souhaiter que le mouvement soit ininterrompu, soit avec le même élément défilant soit avec un second élément défilant, qui suivra le premier élément pour garnir le vide une fois qu'il aura disparu en boucle. Le premier élément, de la largeur du cadre, va partir de l'extérieur droit du cadre pour aller vers le bord gauche de ce cadre et en sortir de sa largeur. Le second élément va suivre le premier élément dans son déplacement et sera centré lorsque celui-ci aura disparu à gauche. Pour organiser notre boucle, au moment où le second élément sera centré dans le cadre, nous allons déplacer, en invisible, le premier élément, qui va se retrouver derrière le second élément, à l'extérieur droit du cadre. Ainsi, lorsque le second élément sortira du cadre, le premier élément y rentrera et la boucle sera bouclée ! Les deux paragraphes se positionnant, par défaut, l'un sous l'autre, nous ferons remonter le second élément de la hauteur du premier, pour qu'ils soient au même niveau.

Premier élément avec texte et/ou images

Second élément avec texte et/ou images, idem ou non

<div style="width: 700px; height: 50px; border: 1px solid black; overflow: hidden; margin: 10px auto;">
<p id="t2">Premier élément avec texte et/ou images</p>
<p id="t3">Second élément avec texte et/ou images, idem ou non</p>
</div>

<style></style>

Si vous voulez que votre défilé traverse votre page entière, il faudra en connaître la largeur, ce qui déterminera la largeur des éléments défilants.

Pour aligner des images à la place des textes, vous pourrez écrire, dans le dernier code, en adaptant les valeurs à votre montage:

<div style="width: 700px; height: 50px; border: 1px solid black; overflow: hidden; margin: 10px auto;">
<p id="t2"><img class="gm2" src="http://A"><img class="gm" src="http://B"><img class="gm" src="http://C">...</p>
<p id="t3"><img class="gm2" src="http://A"><img class="gm" src="http://B"><img class="gm" src="http://C">...</p>
</div>
<style></style>

ABC

DEF

On peut arrêter le défilement au survol mais je n'ai pas trouvé le moyen de mettre ensuite un lien sur image ... à suivre !

On peut arrêter le défilement par un bouton:

- invisible, au dessus du montage, il rend inaccessible le clic sur les images.

- extérieur au clic: le clic n'autorise pas un autre clic sur une image.

Voici un modèle où l'on peut mettre des liens sur les images mais ce n'est plus vraiment un défilé.