Niveau Niveau expert

Slideshow en CSS3

Tutorielcss

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

css target css3 transitions images-clefs keyframes slideshow

Beaucoup de Webdesigners en rêvent : utiliser les CSS plutôt que le JavaScript ou le Flash pour animer leur page web. Ce rêve devient petit à petit concret avec les nouvelles implémentations des modules CSS en cours de travail (Working Draft), notamment CSS3 Animations. Celui-ci équipé des keyframes devient fort intéressant pour un contrôle avancé des animations. Nous verrons donc comment utiliser cette nouveauté, mais aussi comment combiner intelligemment la pseudo-classe target pour réaliser un slideshow.

Sommaire

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

Introduction à Target et Animation

Présentation et compatibilité

Cette partie du tutoriel va légèrement reprendre le contenu d'une publication d'Antoine Cailliau, Tutoriel sur les Transitions CSS3, que je vous conseille de lire au préalable.

Ce tutoriel repose sur les spécifications du W3C concernant la pseudo-classe target du module "Selectors Level 3 (:target)" passée il y a peu en W3C Recommandation et sur le module "CSS Animations Module Level 3" actuellement en Working Draft.

La pseudo-classe `target`

Beaucoup de liens d'un site web renvoient sur des parties précises d'une page par l'intermédiaire d'ancres. La navigation devient alors beaucoup plus aisée et le passage d'une partie d'une page à une autre est facilité. Nous rencontrons ceci assez souvent dans les F.A.Q. d'un site internet, avec un sommaire de questions, puis plus bas toutes les réponses correspondantes.

Voici la syntaxe d'un lien renvoyant sur une ancre.

<a href="#faire-lien">Comment faire un lien ?</a>

Ce lien cible un élément (l'ancre) dont l'id est faire-lien, en voici un exemple :

<div id="faire-lien" class="blocReponse">
   <p class="question">Comment faire un lien ?</p>
   <p class="reponse">La réponse à la question...</p>
</div>

Une fois le clic effectué sur le lien l'élément ciblé peut subir des changements de styles grâce à la pseudo-classe target.

.blocReponse:target {
   background: #DDD;
   border: 1px solid #000;
}

Voir l'exemple

Votre attention : Vous remarquerez l'utilisation de la classe .blocReponse dans le CSS en lieu et place de l'id correspondant #faire-lien. Cela simplifie l'utilisation de cette pseudo-classe si, pour poursuivre sur notre exemple, notre F.A.Q. devait posséder une cinquantaine de questions !

Remarque : la pseudo-classe target est actuellement prise en charge par toutes les dernières versions des navigateurs modernes, sauf Internet Explorer 8 et ses versions antérieures.

Les animations

Les spécifications relatives aux transitions et animations sont "CSS3 Transitions" et "CSS Animations Module Level 3".

Pour simplifier les lignes de code qui suivront je ne préciserai aucun des suffixes nécessaires à la prise en charge des animations en CSS par les navigateurs. Je vous rappelle que pour la prise en charge complète (actuelle et à venir) de ces propriétés, il serait idéal d'écrire :

element {
   -webkit-transition: all 1s; /* pour Webkit      */
   -moz-transition:    all 1s; /* pour Firefox 4+  */
   -o-transition:      all 1s; /* pour Opera 10.5+ */
   transition:         all 1s; /* pour tous (W3C)  */
}

Remarque : avec les animations en CSS nous commençons déjà à restreindre la liste des navigateurs compatibles, puisque seuls Chrome, Safari, Opera et Firefox 4+ prennent en charge cette fonctionnalité. IE10 devrait rejoindre ce groupe d'ici peu.

Passons à la pratique !

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 !