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{
display: table;
width:2700px;
-webkit-animation: slideAnim 20s ease 0s infinite;
-moz-animation: slideAnim 20s ease 0s infinite;
-ms-animation: slideAnim 20s ease 0s infinite;
-o-animation: slideAnim 20s ease 0s infinite;
animation: slideAnim 20s ease 0s infinite;
}
ul li{
display: table-cell;
width:300px;
}
@keyframes slideAnim{
from,11%,to {margin-left:-300px;}
15%,26%{margin-left:-600px;}
30%,41%{margin-left:-900px;}
45%,56%{margin-left:-1200px;}
65%,76%{margin-left:-1500px;}
80%,91%{margin-left:-1800px;}
99.99%{margin-left:-2100px;}
}Note : ne pas oublier de recopier 5 fois la déclaration des étapes @keyframes
Nous avons donc le bloc <ul> composé de 9 images (6 + la copie des 3 premières) sur lequel on lance 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...
#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...
#3par Philippe, le 25 juin 2012
Bonjour,
Ça marche aussi avec opéra 12. Reste à tester avec IE. Qui s’y colle ?????
A+
Philippe
#4par MonsieurPixel, le 9 juillet 2012
J’ai essayé sur explorer (J’ai honte d’avoir fait ça) et sans surprise ça ne marche pas.
#5par Belabela, le 12 septembre 2012
Magnifique ce site web est magnifique, sûr ce bonne continuation !
#6par Andry, le 29 septembre 2012
Cooool !!!
#7par JayLow, le 6 décembre 2012
Salut, Très bon tuto !
Mais j’ai un problème avec "@keyframes" il n’est pas accepter dans mon css à cause des
{}Comment je peux faire pour qu’il soit accepter ?
#8par J@m1n, le 8 mars 2013
Bonjour,
Est-ce normal que je ne vois rien sur votre site ??? Sous IE, Moz et Chrome ???
Merci ;)
#9par css3create, le 8 mars 2013
@J@m1n : Effectivement, je viens de corriger cela. Merci.
#10par Atypha, le 27 avril 2013
Super tuto et magnifique site web !
#11par Patrick, le 10 mai 2013
Rien à dire... Excellent boulot. Une nouvelle source d’inspiration ! Bravo.
#12par Nk, le 19 juillet 2013
Bonjour,
J’ai un problème de cross driver, l’animation ne fonctionne pas sur Google Chrome mais sur FIrefox oui, est-ce que je peux créer un ul2 ? Est-ce que je pourrais vous envoyer mon code à votre courriel, j’aurais vraiment besoin d’aide svp
Merci !
#13par stefde3, le 23 juillet 2013
Bonjour, je souhaiterai faire de même avec un slideshow mais vertical, j’ai donc modifier les margin-left dans les @frames par margin-top... mais mon cadre reste blanc sans affichier les images... une solution peut-être ?
#14par mewaketgueu, le 6 septembre 2013
salut VDO ton site est une idée vraiment géniale de ta part pour nous les débutants et autres.bonne continuation à toi et nous te ferons des suggestions s’il y en a pour t’aider à progresser toujours
#15par zodiaque, le 18 avril 2014
Salut, un grand merci pour ces tutos super utiles :)
Je souhaitais savoir quelles modifications devrais-je apporter si je souhaitais passer à +de 9 images par exemple ?
En espérant avoir un retour à ma question, comme le dernier post date d’un moment déjà :).
#16par css3create, le 18 avril 2014
@zodiaque : Il te faut adapter l’animation. Calcule à combien le décalage final doit être et ajoute des étapes dans ton @keyframes.