Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Slider Galerie photos "en boucle" en CSS3

Galerie photo avec défilement automatique

Création: octobre 2010Modifié:

  • Abarth 500
  • Abarth 500
  • Abarth 500
  • Abarth 500
  • Abarth 500
  • Abarth 500
  • Abarth 500
  • Abarth 500
  • Abarth 500
Contenu
Full CSS Pas de JavaScript
Navigateurs
Firefox Safari Chrome Opera Internet Explorer
CSS3...
Animations CSS
Partagez
Facebook Twitter

Votez

76 votes4.14

Utilisation des animations CSS3 afin de créer un slideshow. Une galerie photo uniquement en CSS3, grâce aux feuilles de styles.

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...

Envie d'une nouvelle démo?

Un p'tit mot...

#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.


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)