{"id":307,"date":"2010-07-07T00:25:49","date_gmt":"2010-07-06T22:25:49","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=307"},"modified":"2015-01-18T17:52:44","modified_gmt":"2015-01-18T16:52:44","slug":"html5-et-css3-dans-des-slideshow-sans-javascript","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/html5-et-css3-dans-des-slideshow-sans-javascript","title":{"rendered":"HTML5 et CSS3 dans des slideshow sans javascript"},"content":{"rendered":"

Lorsque je ne sais pas quoi faire, c’est \u00e0 dire rarement, je fais mijoter ce que j’ai vu, lu ou entendu dans la journ\u00e9e afin de me pr\u00e9parer un bon petit plat. Une nuit, alors que j’allais me coucher, je me suis demand\u00e9 comment utiliser de mani\u00e8re intelligente (et surtout autrement qu’attendue) la pseudo-classe target.<\/p>\n

A quoi sert-elle ?<\/h2>\n

Je ne vais pas m’attarder sur cette pseudo-classe, voici une explication de son utilit\u00e9 premi\u00e8re :
\nD\u00e9couvrez la pseudo classe target<\/a><\/p>\n

Et tu en as fait quoi ?<\/h2>\n

D\u00e9j\u00e0 pr\u00e9sent\u00e9 dans un tutoriel pour le magazine Webdesign HS n\u00b05<\/a>, voici la page sur laquelle j’ai cr\u00e9er un Webdesign int\u00e9gralement en CSS3 sur une base HTML5.
\n\"HTML5
\nN’essayez surtout pas d’ouvrir la page sous IE, cela ne fonctionnera pas. J’ai volontairement supprim\u00e9 tous les fichiers suppl\u00e9mentaires afin d’all\u00e9ger le dossier et surtout pour \u00e9viter de l\u00e9ser ceux qui auraient achet\u00e9 le magazine.<\/p>\n

Ce design comporte un petit slideshow sans javascript, g\u00e9r\u00e9 uniquement gr\u00e2ce \u00e0 la pseudo-classe target et aux changements apport\u00e9s aux \u00e9l\u00e9ments enfants de l’\u00e9l\u00e9ment target\u00e9. Sans \u00eatre devins vous aurez rapidement compris qu’il va y avoir de jolies imbrications.<\/p>\n

Regardez le code par vous-m\u00eame (vers la ligne 345 de la feuille de styles), je vous laisse le lien de la page :
\nWebdesign et slideshow en CSS3 <\/a><\/p>\n

Pour le HTML rien de bien compliqu\u00e9, \u00e0 chaque \u00ab\u00a0\u00e9tape\u00a0\u00bb suppl\u00e9mentaire pour le slideshow on rajoute une imbrication de div et liens de contr\u00f4le. De quoi se taper une divite aig\u00fce !
\nCertes, cela peut rapidement amener \u00e0 un grand n’importe quoi d’\u00e9l\u00e9ments, mais pour les fans de PHP il y a des solutions. Et puis ce ne sont que des tests !<\/p>\n

Un slideshow \u00e0 d\u00e9filement automatique<\/h2>\n

Comme j’ai entendu parl\u00e9 des keyframes quelques jours apr\u00e8s, je me suis d\u00e9cid\u00e9 \u00e0 voir comment apporter une modification \u00e0 mon slideshow g\u00e9r\u00e9 au clic. Je souhaitais combiner le contr\u00f4le au clic et le d\u00e9filement automatique, cependant l’un ne va (pour le moment ?) pas avec l’autre, en tout cas dans mes essais.<\/p>\n

J’ai donc \u00e9labor\u00e9 cette seconde version qui n’aura d’int\u00e9r\u00eat pour le moment que sous Chrome et Safari, les seuls \u00e0 g\u00e9rer les Keyframes \u00e0 ma connaissance.
\nL’utilisation de cette technique d’animation se rapproche fortement de l’interpolation de mouvement sous Flash. D’une image-clef \u00e0 l’autre l’animation sera automatiquement g\u00e9r\u00e9e (d\u00e9placement, opacit\u00e9, rotation, etc. tout ce qui a une unit\u00e9 a priori).<\/p>\n

Ici je pr\u00e9vois simplement un d\u00e9placement d’un bloc positionn\u00e9 en absolu. Il me suffit donc de changer \u00e0 chaque image-clef la valeur de left.
\nVous verrez cela \u00e0 la ligne 213 du fichier CSS li\u00e9 \u00e0 cette page :
\nSlideshow automatique en CSS3<\/a><\/p>\n

J’essaye prochainement de vous pondre un tutoriel sur cette derni\u00e8re utilisation des animations en CSS3.
\nMais je ne vous promets rien \ud83d\ude09<\/p>\n

Et sinon ?<\/h2>\n

Sinon ? Je vous ai pondu un petit truc il y a une heure pour regrouper mes tests, c’est ici :
\nTryToTry<\/a><\/p>\n

A la prochaine !<\/p>\n

\n

Liens utiles<\/h2>\n