Blog iamvdo.me
Utilisation des animations CSS pour réaliser cet effet. L’animation totale dure 20s : 14% d’affichage de photo, 2% de slide vers la photo suivante et 4% pour revenir sur la première photo.
ul{
width:1800px;
-webkit-animation: animNom 20s ease 0s infinite;
-moz-animation: animNom 20s ease 0s infinite;
-ms-animation: animNom 20s ease 0s infinite;
-o-animation: animNom 20s ease 0s infinite;
animation: animNom 20s ease 0s infinite;
}
@keyframes animNom {
from, 14%, to {transform:translateX(0px);}
16%, 30% {transform:translateX(-300px);}
32%, 46% {transform:translateX(-600px);}
48%, 62% {transform:translateX(-900px);}
64%, 78% {transform:translateX(-1200px);}
80%, 96% {transform:translateX(-1500px);}
} Note : n’oubliez pas d’ajouter tous les préfixes sur les @keyframes.
L’effet réalisé dans cet exemple est assez simple. Aller plus loin avec cet article : Slider Galerie photos "en boucle" en CSS3
#1par Dan, le 9 octobre 2011
Totalement fabuleux !
Je développe depuis 15 ans et j’ai toujours réussi à éviter JS ;-)
Me voilà comblé.
Merci, je vais potasser grave !
#2par Kikimagik, le 20 décembre 2011
Bonjour,
Comment fais-tu pour que les photos ne défilent que dans la fenêtre (div) au fond blanc ? C’est problématique car moi elle défilent sur toutes la longueur de la page :/
#3par css3create, le 21 décembre 2011
@Kikimagik : regardes du côté de overflow : hidden ;
#4par Kikimagik, le 21 décembre 2011
@css3create : Merci de ton aide, cela fonctionne très bien ;)
#5par Philippe, le 2 juillet 2012
Bonjour,
Super votre idée de Slide show. Je l’ai réadapté pour faire défiler les bannières de mes sponsors sur mon site http://saintlaurentneige.fr/slnv2/i... . J’ai en plus repris votre idée sur les effets de dégradé sur texte style twiter afin de faire apparaître et disparaître mes bannières dans un effet de fondu. Je ne sais pas si cela marche avec IE, mais avec tous les autres navigateurs, cela fonctionne bien. Merci encore pour toutes ces bonnes idées que vous mettez à dispo des internautes….
#6par helène, le 22 octobre 2012
Bonjour,
votre tuto est super mais j’aimerai savoir comment appliquer cette méthode dans une seule et même page pour des images rangées par catégorie (il ne faut pas que les images apparaissent tout en même temps ?)
Je veux pouvoir faire apparaitre les images d’une catégorie depuis un menu.
La solution viable que j’ai trouvé est de créer une page pour chacune des catégories
merci d’avance !
#7par Marmitte, le 11 décembre 2012
Bonjour,
Super tuto que j’ai essayé d’adapter (affichage un peu plus fluide)... mais qui ne fonctionne ni sur IE, ni sur Chrome... http://pict-horse.fr/haras-d-elle2/...
Sauriez-vous me dire d’où ça vient ?
Dans mon css, j’ai simplement mit :
@keyframes slideAnim
100%margin-left :-800px ;
Et savez-vous pourquoi l’animation ralenti ??
Merci d’avance pour vos réponses, et pour tout ce que ce site peut apporter !
#8par css3create, le 11 décembre 2012
@Marmitte : Il te manque certainement les préfixes ! Faire des copier-coller c’est bien mais comprendre c’est encore mieux ! :p
#9par Joupi, le 27 février 2013
Bonjour, et merci pour ce site.
Etrange, je ne vois pas s’afficher la démo en début d’article. J’ai remarqué cela également sur d’autres articles (je suis sur Firefox 19)
#10par janibel31, le 8 novembre 2013
Bonjour,
Dans une page après une image flottante + un texte + du texte en dessous j’ai mis un titre "quelques réalisations". Sous ce titre je voudrais placer un diaporama de 6/8 images.
Je voudrais un diaporama simple :
- centrer dans la largeur de la page
- avec une commande manuelle (boutons à gauche et à droite qui permettent de faire avancer l’image dans un sens ou dans un autre)
J’ai cherché sur le net. il y a des tutoriels qui offrent de tas de possibilités et que je ne comprends pas. Je cherche un tutoriel ou la démarche de construction est expliquée pas à pas.
J’ai un répertoire pour le projet de site et ensuite des dossiers :Css, images, video. Puis des fichiers pour chaque page.
Si quelqu’un pouvait me renseigner.
Meilleures salutations