-
Défilé d'images.
J'ai trouvé un site qui expliquait un montage que j'utilise en commande manuel mais qu'on peut modifier en défilement automatique; alors, voici ma contribution.
Par principe, je préfère que le visiteur affiche les images à son gré mais on peut ajouter un arrêt au survol, comme ici, pour avoir le temps de bien regarder une image particulière.
Le temps du cycle est facile à modifier puisque le code calcule en % et donc l'affichage de chaque image, aussi.Code.
<div style="width: 800px; height: 600px; border: 4px ridge white; margin: 10px auto; overflow: hidden;">
<p id="def" style="width: 4010px; height: 600px;"><img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/WstPtNlnAfXl_XzOv_KrmI1hLz0/5641.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/S0b0l4kuNVbKQe7p97-YQj8MtiU/5642.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/sWillzZGoIlYIicjvSzX0-CLn4s/5643.jpg" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/05/DSCN5645.JPG" alt="" /> <img style="width: 800px; height: 600px; float: left;" src="http://ekladata.com/pourquoipas732.eklablog.com/perso/2015/octobre/05/DSCN5646.JPG" alt="" /></p>
</div>
<style><!--
#def{animation: anim 180s linear infinite alternate;
animation-play-state: running;}
#def:hover{animation-play-state: paused;}@keyframes anim {
0% {transform:translate(0px,0px);}
10% {transform:translate(0px,0px);}
12% {transform:translate(-800px,0px);}
35% {transform:translate(-800px,0px);}
35% {transform:translate(-1600px,0px);}
60% {transform:translate(-1600px,0px);}
62% {transform:translate(-2400px,0px);}
85% {transform:translate(-2400px,0px);}
87% {transform:translate(-3200px,0px);}
100% {transform:translate(-3200px,0px);}
}
--></style>
La fenêtre d'affichage et de 800x600px et cache ce qui en dépasse (overflow:hidden;), en l'occurrence les images les unes à côté des autres: ici 5x800px = 4000px.
Le paragraphe des images (id="def") est animé pour présenter chaque image avec une transition courte: vous pouvez remplacer mes adresses d'images par les vôtre.
L'animation défile par défaut et s'arrête au survol.