Souscrire
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;
}
@-webkit-keyframes animNom {
from {-webkit-transform:translateX(0px);}
14%{-webkit-transform:translateX(0px);}
16%{-webkit-transform:translateX(-300px);}
30%{-webkit-transform:translateX(-300px);}
32%{-webkit-transform:translateX(-600px);}
46%{-webkit-transform:translateX(-600px);}
48%{-webkit-transform:translateX(-900px);}
62%{-webkit-transform:translateX(-900px);}
64%{-webkit-transform:translateX(-1200px);}
78%{-webkit-transform:translateX(-1200px);}
80%{-webkit-transform:translateX(-1500px);}
96%{-webkit-transform:translateX(-1500px);}
to{-webkit-transform:translateX(0px);}
} L’animation ne marche qu’avec le moteur webkit.
L’effet réalisé dans cet exemple est assez simple. Continuez 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 ;)