Souscrire
Blog iamvdo.me
Comme pour l’article Slider Galerie photos en CSS3, utilisation des animations CSS pour réaliser cet effet.
Sauf qu’ici, l’animation est continue et tourne en boucle.
Pour réaliser cet effet, une adaptation du code HTML a été nécessaire : pour cela, copiez les 3 premières images du slideshow à la fin du bloc à déplacer. Cela est du au fait que lors de l’animation, on voit en permanence 3 images.
Voici l’animation utilisée :
ul{
width:2700px;
-webkit-animation:slideAnim 20s ease 0s infinite;
}
ul li{
width:300px;
float:left;
}
@-webkit-keyframes slideAnim{
from {margin-left:-300px;}
11%{margin-left:-300px;}
15%{margin-left:-600px;}
26%{margin-left:-600px;}
30%{margin-left:-900px;}
41%{margin-left:-900px;}
45%{margin-left:-1200px;}
56%{margin-left:-1200px;}
65%{margin-left:-1500px;}
76%{margin-left:-1500px;}
80%{margin-left:-1800px;}
91%{margin-left:-1800px;}
99.99%{margin-left:-2100px;}
to{margin-left:-300px;}
}Nous avons donc le bloc <ul> composé de 9 images (6 + la copie des 3 premières) sur lequel on lande l’animation.
Pourquoi ça tourne en boucle ?
Juste avant la fin de l’anim, on déplace tout le bloc en position de départ très rapidement (en 0,01% dans ce cas). Cela provoque une superposition des images invisible à l’oeil nu. L’animation reprend donc depuis le début, mais on a l’impression qu’elle continue...
L’animation ne marche qu’avec le moteur webkit.
#1par Geoffrey, le 25 novembre 2011
Hello Vincent,
Cela fonctionne parfaitement avec Firefox également, pourquoi s’en priver ?
http://www.creativejuiz.fr/trytotry...
Bonne continuation
#2par css3create, le 25 novembre 2011
@Geoffrey : tout simplement parce que je n’ai pas pris le temps de mettre à jour mes démos. _ ;) Il faut que j’arrête de repousser la mise à jour...