Niveau : Expert

Slideshow en CSS3

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.

Tutoriel par (WebDesigner grapilleur de Kiwiz, Strasbourg)
Créé le , mis à jour le (161604 lectures)
Tags : css, target, css3, transitions, images-clefs, keyframes, slideshow

Sommaire


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 !