Lorsque je ne sais pas quoi faire, c’est à dire rarement, je fais mijoter ce que j’ai vu, lu ou entendu dans la journée afin de me préparer un bon petit plat. Une nuit, alors que j’allais me coucher, je me suis demandé comment utiliser de manière intelligente (et surtout autrement qu’attendue) la pseudo-classe target.
A quoi sert-elle ?
Je ne vais pas m’attarder sur cette pseudo-classe, voici une explication de son utilité première :
Découvrez la pseudo classe target
Et tu en as fait quoi ?
Déjà présenté dans un tutoriel pour le magazine Webdesign HS n°5, voici la page sur laquelle j’ai créer un Webdesign intégralement en CSS3 sur une base HTML5.
N’essayez surtout pas d’ouvrir la page sous IE, cela ne fonctionnera pas. J’ai volontairement supprimé tous les fichiers supplémentaires afin d’alléger le dossier et surtout pour éviter de léser ceux qui auraient acheté le magazine.
Ce design comporte un petit slideshow sans javascript, géré uniquement grâce à la pseudo-classe target et aux changements apportés aux éléments enfants de l’élément targeté. Sans être devins vous aurez rapidement compris qu’il va y avoir de jolies imbrications.
Regardez le code par vous-même (vers la ligne 345 de la feuille de styles), je vous laisse le lien de la page :
Webdesign et slideshow en CSS3
Pour le HTML rien de bien compliqué, à chaque « étape » supplémentaire pour le slideshow on rajoute une imbrication de div et liens de contrôle. De quoi se taper une divite aigüe !
Certes, cela peut rapidement amener à un grand n’importe quoi d’éléments, mais pour les fans de PHP il y a des solutions. Et puis ce ne sont que des tests !
Un slideshow à défilement automatique
Comme j’ai entendu parlé des keyframes quelques jours après, je me suis décidé à voir comment apporter une modification à mon slideshow géré au clic. Je souhaitais combiner le contrôle au clic et le défilement automatique, cependant l’un ne va (pour le moment ?) pas avec l’autre, en tout cas dans mes essais.
J’ai donc élaboré cette seconde version qui n’aura d’intérêt pour le moment que sous Chrome et Safari, les seuls à gérer les Keyframes à ma connaissance.
L’utilisation de cette technique d’animation se rapproche fortement de l’interpolation de mouvement sous Flash. D’une image-clef à l’autre l’animation sera automatiquement gérée (déplacement, opacité, rotation, etc. tout ce qui a une unité a priori).
Ici je prévois simplement un déplacement d’un bloc positionné en absolu. Il me suffit donc de changer à chaque image-clef la valeur de left.
Vous verrez cela à la ligne 213 du fichier CSS lié à cette page :
Slideshow automatique en CSS3
J’essaye prochainement de vous pondre un tutoriel sur cette dernière utilisation des animations en CSS3.
Mais je ne vous promets rien 😉
Et sinon ?
Sinon ? Je vous ai pondu un petit truc il y a une heure pour regrouper mes tests, c’est ici :
TryToTry
A la prochaine !
Liens utiles
Partager la publication "HTML5 et CSS3 dans des slideshow sans javascript"
C’est quand même génial de voir ce que permet de faire CSS3, vivement que les autres navigateurs suivent la voie de Chrome et Safari.
La version proposée dans le magazine était déjà impressionnante. Ce nouvel effet en rajoute une jolie touche. Quel dommage de ne pas avoir le contrôle au clic et le défilement automatique à la fois.
À essayer dès que je rentre chez moi. 😀
Merci pour ce retour Basile.
En effet vivement que les autres suivent. Opera arrive à gérer les animations, mais sur sa dernière version j’ai eu un bogue inexplicable lors de la création du tutoriel (je suis en train de l’écrire).
Si jamais tu trouves un truc sympa n’hésites pas à nous le faire savoir 😉
Merci beaucoup et bonne continuation
J’ai regardé ton tuto sur alsacréations, et chez moi ça ne fonctionne que sur chrome. Mes dernières versions de firefox et opera ne passent que la moitié des tests, très étrange.
Salut Thomas,
En effet Firefox ne prend pas en charge les animations, même dans sa dernière version (sauf si la 3.7 est sortie pendant mon week-end au soleil :p).
Quant à Opera dans sa dernière version, j’ai eu aussi des soucis un peu bizarres que je n’avais pas eu lors des tests sur TryToTry.
Passons donc sur les bogues pour le moment, il s’agit principalement d’un tutoriel présentant les possibilités à venir de CSS3, ça ne fait que commencer, alors attendons l’implémentation native sur les navigateurs, ça sera certainement plus stable que ça l’est en ce moment.
Au passage voici un site sympa trouvé par Raphaël sur l’animation CSS sur IE : Transformie.
Merci pour tes tests en tout cas 😉
PS : ça doit tourner sur Safari aussi
Merci pour le site 🙂 je le met de côté, ça peut toujours servir^^
Si la nouvelle version de FF est sortie pendant le week end, alors moi aussi je l’ai ratée 😉
J’ai bien conscience que c’est du tout neuf^^ mais il me semblait avoir eu l’occasion de voir de belles transitions sur un site us il y a quelques mois, et qui fonctionnaient plutôt bien sur quelques navigateurs, malheureusement, je n’ai plus le truc sous la main. Enfin bon, c’est assez dur à porter pour le moment -_-‘^^.
J’aurais bien voulu faire des tests sous Safari, mais chez moi l’installation refuse de se faire correctement. Tu as eu des problèmes avec dernièrement?
Pendant que j’y suis 😀 ton site a une belle gueule 😉 c’est assez propre comme travail, j’aimerais bien savoir en faire autant^^
Oh, merci pour ce commentaire sur la « gueule » de mon site. C’est gentil. Mais tu mens ! Tu sais faire aussi :p
Pour le site US ça ne me dit rien de l’avoir croisé, en général quand je me décide à suivre un lien « slideshow CSS3 » il y a toujours un peu de jQuery, et pas toujours bien utilisé en plus. Mais si jamais tu le retrouves n’hésites pas à me le faire savoir, ça m’intéresse.
Pas de souci particulier avec Safari, jamais eu de problème sur mes différentes installations ou mises à jour.
Bonne continuation 😉
ba en fait, j’ai dit la vérité^^ les choses que j’aurais pas su faire mon collègue me les a apprises cet aprèm en observant ton site^^ (l’est artiste print, donc il s’y connait un peu^^), donc je ne savais pas, mais maintenant, j’ai quelques bonnes pistes ;). De plus, ma branche c’est plutôt le développement^^ le graphisme c’est par plaisir^^
Pour le lien, si j’le retrouve, t’en seras le premier informé ;). Dans mes souvenirs, il n’y avait pas de jquery, que du css^^, mais ça remonte à plusieurs mois, donc je ne promet rien.
Ok, merci pour l’info pour Safari, mon problème doit être assez personnel du coup, je verrais comment j’peux régler ça.
Bonne continuation à toi aussi, je garderais un oeil sur ton travail 🙂 et je t’enverrais un lien vers le mien quand ce sera prêt 😉
Merci beaucoup 😉
Garde ce plaisir surtout ! C’est très important.
Au plaisir (justement :p)
Bonjour,
Tout d’abord merci, votre slideshow en css3 est une idée géniale qui fonctionne très bien, j’ai déjà réussi à l’appliquer/le modifier, et ça marche du tonnerre.
Cependant, j’ai recherché partout sur le net, et je n’ai pas trouvé comment je pourrais supprimer le scroll vertical classique d’une ancre quand on clique manuellement sur un lien… auriez vous une idée de comment faire?
J’ai déjà essayé return false et preventDefault, mais ça annule l’action de l’ancre et donc plus question de :target–>plus de slideshow^^
Merci d’avance de vous pencher sur ma question
Bonsoir Gabriel,
Merci pour ton commentaire 🙂
Hélas le problème est lié au principe même de
:target, qui ici est utilisé dans un contexte bien détourné.La pseudo-classe
:targetsert initialement à mettre en évidence un contenu ciblé par une ancre.L’ancre permettant de directement à un nouvel emplacement sur le document, son comportement peut être court-circuité par du JS, mais dans ce cas c’est tout le slideshow qui serait à revoir en JS.
Cependant, en alternative à JavaScript, cette méthode en CSS3 peut-être une solution acceptable 🙂
Bonsoir Geoffrey,
OK, tant pis pour les ancres^^
Sinon j’avais une autre question, j’ai implémenté l’animation css3 et elle ne cohabite pas avec la version « manuelle » de mon slideshow.
Donc j’ai pensé à une alternative manuelle pour le js et jquery, mais je ne parvient pas à recuperer le decalage quand le slideshow est automatique (le css left), une idée? ^^’
Et je me demandait également si il y avait des équivalent pour cette animation pour les autres navigateurs?
Merci 🙂
Bonjour,
Vincent De Oliveira propose une solution au problème de saut lié à l’activation d’une ancre.
Voici le sujet qui en parle : http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target
Au plaisir.
Hello,
En CSS les deux (manuel et automatique) ne sont pas combinables puisque
targetattend une action de l’utilisateur, d’une part, et l’animation est automatique, d’autre part.Il serait cependant possible de stopper l’animation automatique en utilisant la pseudo-class target pour stopper l’animation.
Je te renvoie sur l’article de Simon Boudrias (Vaxilart sur Alsacréations) postée aujourd’hui même :
http://www.alsacreations.com/tuto/lire/1299-timing-des-animations-et-des-transitions-en-css3.html
De quoi démystifier tout cela.
Pour JS je crois que si tu souhaites conserver CSS en solution de replis, il faudra supprimer les keyframes directement avec la fonction css() de jQuery.
Bonne journée 😉
Merci beaucoup pour ce lien 😀
Bonjour,
Je viens de découvrir cet article un peu tard certes mais bon 🙂
Je voudrais m’en inspirer pour un cas pratique, le but est de faire un slide non pas sur des images mais différentes frame (youtube, site web, google docs) penses-tu que ton tuto pourrais convenir ?
J’ai déjà réaliser pour mon cas le slide en java-script, mais niveau perf c’est pas très bon et j’ai beaucoup de conflit avec les google docs.
Merci 🙂
Bonjour,
J’ai pas encore lu toutes les pages de ton site, mais le peu que j’ai eu est juste super. J’ai vu beaucoup de chose qui m’intéresse et dont je suis à la recherche. J’ai reconnu également plusieurs objets identiques à ceux dans les CD des magasines WebDesign (j’adore ce magasine! un peu cher à mon goût par contre).
Bonne continuation ! 😀
Bonjour,
Merci pour tes compliments.
Effectivement j’écris aussi pour WebDesign Magazine, il est possible qu’il y ait des choses ressemblantes (en espérant que ce soit bien des articles que j’ai écrit, sinon je ne suis pas au courant de leur utilisation…)
Au plaisir et bonne lecture.