Niveau Niveau expert

Slideshow en CSS3

Tutorielcss

Publié par Geoffrey C. le 11 Juillet 2010, mis à jour le 13 Novembre 2012 (203268 lectures)

css xhtml animation css3 transitions images-clefs keyframes slideshow iteration-count

Sommaire

Introduction à Target et Animation
Un slideshow avec contrôle au clic (:target)
Un slideshow à défilement automatique
Améliorations, discussion et suggestions

Un slideshow à défilement automatique

Un slideshow automatique grâce aux keyframes

Je vous ai fait débuter par le plus complexe avec le concept de :target, juste pour vous faire souffrir ;)

Vous allez vraiment apprécier cette technique un peu plus simple qui consiste à laisser tourner l'animation en la faisant passer par différentes étapes. Le principe est relativement simple, nous allons reprendre notre toute première version du slideshow précédent, lui retirer les deux liens et ajouter un élément pour bien visualiser les transitions.

<div id="slideshow">
	<ul id="sContent"><!--
		--><li><img src="images/bleu.png" alt="Image bleue" /></li><!--
		--><li><img src="images/vert.png" alt="Image verte" /></li><!--
		--><li><img src="images/brun.png" alt="Image brune" /></li>
	</ul>
</div>

Notre CSS va ensuite définir une animation par images-clefs. Cela va se dérouler comme sur une ligne de temps (timeline pour les intimes de Flash) allant de 0% à 100%. La durée sera donnée seulement lorsque l'animation sera appliquée à un élément. À chaque image-clef nous définirons les propriétés à changer ainsi que la position du curseur sur notre ligne de temps. Voici ce que cela donne concrètement :

@keyframes AutoSlide {
	0% {
		left: 0px; /*1ère image*/
	}
	15% {
		left: 0px; /*idem pour attente*/
	}
	35% {
		left: -150px; /*2ème image*/
	}
	50% {
		left: -150px; /*idem pour attente*/
	}
	70% {
		left: -300px; /*3ème image*/
	}
	85% {
		left: -300px; /*idem pour attente*/
	}
	100% {
		left: 0px; /*1ère image*/
	}
}

Dans un premier temps nous annonçons l'utilisation des keyframes. Puis nous donnons un nom à cette animation, ici AutoSlide.

Une autre manière d'écrire cette même animation serait celle-ci:

@keyframes AutoSlide {
	0%, 15%, 100% {
		left: 0px; /*1ère image*/
	}
	35%, 50% {
		left: -150px; /*2ème image*/
	}
	70%, 85% {
		left: -300px; /*3ème image*/
	}
}

Cette syntaxe permet de gagner en place en regroupant les points d'étape.

Ne pas oublier les préfixes pour chaque navigateur (@-moz-keyframes , @-webkit-keyframes, etc.)

- Il est aussi possible de remplacer 0% et 100% respectivement par from et to.
- Il est également possible d'utiliser des valeurs en pourcentage pour left.

Continuons en réattribuant les styles précédemment utilisés à notre slide :

#slideshow {
	position: relative;
	width: 150px;
	height: 150px;
	margin:  20px auto;
	overflow: hidden;
}
#sContent li {
	display: inline;
}

Puis les styles concernant l'élément qui défile dans son conteneur :

#sContent {
	position: absolute;
	top: 0;
	left: 0;
	width: 450px;
	margin: 0;            
	padding: 0;
	
	/*CSS3 keyframes animation*/
	animation-name: AutoSlide;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

Voir l'exemple

Faisons un petit récapitulatif :

Quelques propriétés d'animation liées aux Keyframes en CSS3
Nom de la propriété	Explication
animation-name	Le nom de l'animation à utiliser sur l'élément ciblé
animation-duration	La durée de l'animation, définit la durée entre `0%` et `100%` (`from` et `to`) Valeur : durée (ms, s, etc.)
animation-iteration-count	Nombre de boucle (répétition que dois faire l'animation). Valeur : `nombre` ou `infinite`
animation-timing-function	Fonction de modification de l'interpolation de l'animation. Valeur : `ease-in`, `ease-out`, `ease-in-out`, etc.
animation-direction	Comportement de la tête de lecture de l'animation (sens de lecture) Valeur : `alternate`, `normal`
animation-delay	Impose un délais avant le début de l'animation Valeur : durée (ms, s, etc)
animation-play-state	Statut de lecture de l'animation Valeur : `running`, `paused`
Plus d'informations

Et voilà, c'est tout pour ce tutoriel. J'espère que celui-ci aura éveillé votre curiosité sur la prochaine version de CSS !

Vous pouvez visiter, toujours sur mon petit espace de tests, mon premier essai à ce sujet : Slideshow Automatique avec CSS3.

Vous trouverez également un tutoriel plus complexe sur la réalisation d'un slideshow qui combine contrôle au clic et défilement automatique sur mon blog personnel :
Créer un slideshow automatique et contrôlable en CSS3

La prochaine étape est dédiée aux curieux, il s'agira plutôt d'une invitation à la discussion et à l'amélioration des techniques utilisées.

Pages :

Commentaires

tchitchio

06 Février 2018 à 16h04

Bonjour,

Merci pour cette super aide.

J'ai néanmoins un problème d'affichage, en effet je n'ai qu'une seule photo qui défile les deux autres pas.

Est-ce que dans votre exemple vous n'avez qu'une seule image avec plusieurs couleurs ? (personnellement je pense que non car vous diriger bien vers 3 images)

Avez-vous une idée d'où peut provenir l'erreur ?

la seule chose que je n'ai pas faite (et que je ne comprends pas quoi faire) est

" Ne pas oublier les préfixes pour chaque navigateur (@-moz-keyframes , @-webkit-keyframes, etc.)"

Merci d'avance pour le temps que vous allez consacrer à ma réponse

Bien à vous

tchitchio

06 Février 2018 à 16h19

IEDfactory

15 Mars 2018 à 09h12

Bonjour,

J'ai essayé d'adapter votre tuto, mais je me retrouve, sans que cela fonctionne, avec mes deux bandeaux l'un au dessus de l'autre...

Merci de votre aide ?

le code HTML:

<div id="slidebanner">

<ul id="sContent">

<li><a href="https://www.monsite.com" target="_blank"><img src="https://www.monsite/bannierre-haute-1.jpg" alt="Nouveau site 1" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>

<li><a href="https://www.monsite2.com" target="_blank"><img src="https://www.monsite2.com/bannierre-haute-2.jpg" alt="Mon site 2, découvrez ce site !" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>

</ul>

</div>

le CSS :

@keyframes AutoSlide {

from 0s to 0s, from 0s to 3s {

left: 0px; /*1ère image*/

}

from 3s to 3s, from3s to 6s {

left: -1100px; /*2ème image*/

}

}

#slidebanner {

position: relative;

width: 100%;

height: 100%;

margin: 0px;

overflow: hidden;

}

#sContent li {

display: inline;

}

#sContent {

position: absolute;

top: 0;

left: 0;

width: 1100px;

margin: 0;

padding: 0;

/*CSS3 keyframes animation*/

animation-name: AutoSlide;

-webkit-animation-name: AutoSlide;

-moz-animation-name: AutoSlide;

-o-animation-name: AutoSlide;

animation-duration: 6s;

-webkit-animation-duration: 6s;

-moz-animation-duration: 6s;

-o-animation-duration: 6s;

animation-iteration-count: infinite;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

-o-animation-iteration-count: infinite;

animation-timing-function: linear;

-webkit-animation-timing-function: linear;

-moz-animation-timing-function: linear;

-o-animation-timing-function: linear;

}

Merci d'avance !

IEDfactory

16 Mars 2018 à 08h41

Sommaire

Un slideshow à défilement automatique

Un slideshow automatique grâce aux keyframes

Quiz

Commentaires