{"id":2127,"date":"2012-05-16T08:58:33","date_gmt":"2012-05-16T06:58:33","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=2127"},"modified":"2017-04-20T09:25:17","modified_gmt":"2017-04-20T07:25:17","slug":"css3-creer-slideshow-automatique-controlable-transition","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/css3-creer-slideshow-automatique-controlable-transition","title":{"rendered":"CSS3 &#8211; Cr\u00e9er un slideshow automatique et contr\u00f4lable"},"content":{"rendered":"<p>Si vous suivez le compte <a href=\"https:\/\/twitter.com\/NoupeMag\">@NoupeMag<\/a> sur Twitter (\u00e7a marche aussi pour <a href=\"https:\/\/twitter.com\/geoffreycrofte\">mon compte<\/a>), vous avez certainement vu passer mon <a href=\"http:\/\/creativejuiz.fr\/trytotry\/juizy-slideshow-full-css3-html5\/\" hreflang=\"en\">slideshow en CSS3<\/a> datant de l&rsquo;an dernier.<br \/>\nCe n&rsquo;\u00e9tait pas ma premi\u00e8re tentative de slideshow comme le pr\u00e9sentent ces <a title=\"Slideshow manuel en CSS3\" href=\"\/trytotry\/webdesign-and-slideshow-with-css3\/\">premier<\/a> et <a title=\"Slideshow automatique en CSS3\" href=\"\/trytotry\/automatic-slideshow-css3\/\">second travaux<\/a> datant de mai 2010.<!--more--><\/p>\n<p class=\"message\">Ce tutoriel ne s&rsquo;adresse pas aux d\u00e9butants, il vous faudra un minimum de connaissances techniques pour vous y retrouver dans les tron\u00e7ons de code qui vont suivre. Cependant, le code comment\u00e9 reste &#8211; je l&rsquo;esp\u00e8re &#8211; accessible.<\/p>\n<h2>Avant propos<\/h2>\n<p>La page de <a href=\"http:\/\/creativejuiz.fr\/trytotry\/juizy-slideshow-full-css3-html5\/\" hreflang=\"en\">d\u00e9monstration du slideshow full CSS3<\/a> vous propose des fichiers sources en t\u00e9l\u00e9chargement, profitez-en, notamment si vous souhaitez r\u00e9cup\u00e9rer les images.<\/p>\n<p>Les codes CSS fournis ici sont <strong>l\u00e9g\u00e8rement diff\u00e9rents<\/strong> de ceux fournis dans l&rsquo;archive zipp\u00e9e t\u00e9l\u00e9chargeable. En effet, la r\u00e9daction du tutoriel que vous allez lire m&rsquo;a permis d&rsquo;all\u00e9ger, corriger et am\u00e9liorer le code disponible en t\u00e9l\u00e9chargement. Il fera l&rsquo;objet d&rsquo;une refonte prochaine.<\/p>\n<p>Les codes CSS3 pr\u00e9sents sur ce tutoriel ne tiennent pas compte des pr\u00e9fixes parfois n\u00e9cessaires (-webkit-, -moz-, -ms-, -o-) pour une question de gain de place dans le code. Ne les oubliez pas.<\/p>\n<p class=\"center\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-2494\" title=\"\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/slideshow-css3-html5-juizy.jpg\" alt=\"\" width=\"600\" height=\"296\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/slideshow-css3-html5-juizy.jpg 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/slideshow-css3-html5-juizy-300x148.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Enfin si les bases des langages HTML et CSS vous font d\u00e9faut, n&rsquo;h\u00e9sitez pas \u00e0 jeter un \u0153il \u00e0 cette <a href=\"https:\/\/blog.stephaniewalter.fr\/cours-initiation-html-css\/\" target=\"_blank\" title=\"Formation pour d\u00e9butants en HTML et CSS par St\u00e9phanie Walter\">formation HTML et CSS<\/a>.<\/p>\n<h2 id=\"log\">Les d\u00e9fauts des versions pr\u00e9c\u00e9dentes<\/h2>\n<p>Comme les exp\u00e9rimentations foireuses sont l\u00e0 pour faire ressortir les limites d&rsquo;une technique, voyons ce qui nous manquait dans les versions pr\u00e9c\u00e9dentes (gardez-les sous les yeux pour tester, c&rsquo;est mieux).<br \/>\nSur la version contr\u00f4lable (la premi\u00e8re) :<\/p>\n<ul>\n<li>Un saut de page est visible au clic sur les fl\u00e8ches ;<\/li>\n<li>Nous sommes oblig\u00e9s de multiplier les \u00e9l\u00e9ments (<code class=\"element\">div<\/code> pour les conteneurs, <code class=\"element\">a<\/code> pour les fl\u00e8ches) ;<\/li>\n<li>il faut dupliquer des r\u00e8gles CSS \u00e0 chaque image ajout\u00e9e.<\/li>\n<\/ul>\n<p>Sur la version automatique (la seconde) :<\/p>\n<ul>\n<li>Il n&rsquo;y a pas de commandes (soit&#8230;)<\/li>\n<li>Aucune possibilit\u00e9 de stopper l&rsquo;animation<\/li>\n<li>il faut dupliquer des r\u00e8gles CSS \u00e0 chaque image ajout\u00e9e.<\/li>\n<\/ul>\n<p>Certains de ces probl\u00e8mes ne sont pas r\u00e9solubles, j&rsquo;ai d\u00e9cid\u00e9 de me concentrer sur la fusion des fonctionnalit\u00e9s et sur la correction de certains points :<\/p>\n<ul>\n<li>Fusionner le slideshow automatique et contr\u00f4lable<\/li>\n<li>Ajouter une commande de stop et lecture de l&rsquo;animation<\/li>\n<li>Limiter la multiplication des \u00e9l\u00e9ments<\/li>\n<li>Virer le saut au clic (gr\u00e2ce \u00e0 l&rsquo;<a href=\"http:\/\/www.css3create.com\/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target\">astuce CSS de Vincent De Oliveira<\/a>)<\/li>\n<\/ul>\n<p>Les autres probl\u00e8mes persisteront, vous le verrez.<\/p>\n<p>\u00c0 noter que ce slideshow reste exp\u00e9rimental m\u00eame si compatible avec les derniers navigateurs du march\u00e9.<\/p>\n<h2 id=\"fondations\">Poser les fondations<\/h2>\n<p>Voici du code HTML (HTML5 en l&rsquo;occurrence) que j&rsquo;esp\u00e8re suffisamment parlant.<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;section id=\"slideshow\"&gt;\r\n\t\t\r\n\t&lt;div class=\"container\"&gt;\r\n\t\t&lt;div class=\"c_slider\"&gt;&lt;\/div&gt;\r\n\t\t&lt;div class=\"slider\"&gt;\r\n\t\t\t&lt;figure&gt;\r\n\t\t\t\t&lt;img src=\"img\/dummy-640x310-1.jpg\" alt=\"\" width=\"640\" height=\"310\" \/&gt;\r\n\t\t\t\t&lt;figcaption&gt;The mirror of soul&lt;\/figcaption&gt;\r\n\r\n\t\t\t&lt;\/figure&gt;&lt;!--\r\n\t\t\t--&gt;&lt;figure&gt;\r\n\t\t\t\t&lt;img src=\"img\/dummy-640x310-2.jpg\" alt=\"\" width=\"640\" height=\"310\" \/&gt;\r\n\t\t\t\t&lt;figcaption&gt;Let's cross that bridge when we come to it&lt;\/figcaption&gt;\r\n\t\t\t&lt;\/figure&gt;&lt;!--\r\n\t\t\t--&gt;&lt;figure&gt;\r\n\t\t\t\t&lt;img src=\"img\/dummy-640x310-3.jpg\" alt=\"\" width=\"640\" height=\"310\" \/&gt;\r\n\t\t\t\t&lt;figcaption&gt;Sushi&lt;em&gt;(do)&lt;\/em&gt; time&lt;\/figcaption&gt;\r\n\r\n\t\t\t&lt;\/figure&gt;&lt;!--\r\n\t\t\t--&gt;&lt;figure&gt;\r\n\t\t\t\t&lt;img src=\"img\/dummy-640x310-4.jpg\" alt=\"\" width=\"640\" height=\"310\" \/&gt;\r\n\t\t\t\t&lt;figcaption&gt;Waking Life&lt;\/figcaption&gt;\r\n\t\t\t&lt;\/figure&gt;\r\n\t\t&lt;\/div&gt;\r\n\t&lt;\/div&gt;\r\n\t\t\r\n\t&lt;span id=\"timeline\"&gt;&lt;\/span&gt;\r\n&lt;\/section&gt;<\/code><\/pre>\n<p>Ce code HTML pourrait \u00eatre simplifi\u00e9 en prenant le risque de complexifier la CSS, mais cette derni\u00e8re va d\u00e9j\u00e0 l&rsquo;\u00eatre suffisamment\u2026<br \/>\nPour faire simple nous avons une section pour le slideshow qui r\u00e9unie le conteneur des images (<code>.container<\/code>), la partie qui glisse (<code>.slider<\/code>), les diff\u00e9rentes images l\u00e9gend\u00e9es (sous forme de <code>figure &gt; figcaption<\/code>) et la petite barre de d\u00e9filement du temps (<code>#timeline<\/code>).<\/p>\n<p>Pour ceux qui s&rsquo;interrogent sur la pr\u00e9sence de commentaires HTML, je vous invite \u00e0 lire cet autre article du blog : <a href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/display-inline-block-une-valeur-trop-peu-utilisee\">Display inline-block, une valeur trop peu utilis\u00e9e<\/a>.<\/p>\n<p>Je n&rsquo;ai mis aucun \u00e9l\u00e9ment de commande pour le moment, nous verrons cela plus tard.<\/p>\n<p>Voici le code CSS servant principalement \u00e0 positionner, dimensionner et d\u00e9corer les diff\u00e9rents blocs, que je ne vais pas expliquer dans la mesure o\u00f9 ce n&rsquo;est pas le c\u0153ur de l&rsquo;article, mais il est un minimum comment\u00e9 \ud83d\ude09<\/p>\n<pre class=\"code\"><code class=\"language-css\">#slideshow {\r\n\tposition: relative;\r\n\twidth: 640px;\r\n\theight: 310px;\r\n\tpadding: 15px;\r\n\tmargin: 0 auto 2em;\r\n\tborder: 1px solid #ddd;\r\n\tbackground: #FFF;\r\n\t\/* CSS3 effects *\/\r\n\tbackground: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);\r\n\tborder-radius: 2px 2px 2px 2px;\r\n\tbox-shadow: 0 0 3px rgba(0,0,0, 0.2);\r\n}\r\n\u00a0\r\n\/* avanced box-shadow\r\n\u00a0* tutorial @\r\n\u00a0* https:\/\/www.creativejuiz.fr\/blog\/les-tutoriels\/ombre-avancees-avec-css3-et-box-shadow \r\n*\/\r\n#slideshow:before,\r\n#slideshow:after {\r\n\tposition: absolute;\r\n\tbottom:16px;\r\n\tz-index: -10;\r\n\twidth: 50%;\r\n\theight: 20px;\r\n\tcontent: \" \";\r\n\tbackground: rgba(0,0,0,0.1);\r\n\tborder-radius: 50%;\r\n\tbox-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);\r\n}\r\n#slideshow:before {\r\n\tleft:0;\r\n\ttransform: rotate(-4deg);\r\n}\r\n#slideshow:after {\r\n\tright:0;\r\n\ttransform: rotate(4deg);\r\n}<\/code><\/pre>\n<p class=\"center\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-2501\" title=\"\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-1.jpg\" alt=\"\" width=\"600\" height=\"326\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-1.jpg 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-1-300x163.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Avec ceci nous avons le support graphique des images. C&rsquo;est un peu tout cass\u00e9, mais vous pouvez voir comment r\u00e9aliser simplement un \u00e9l\u00e9ment qui semble assez complexe, notamment au niveau des ombres et d\u00e9grad\u00e9s.<br \/>\nG\u00e9rons le d\u00e9bordement et l&rsquo;alignement de tout ce contenu.<\/p>\n<pre class=\"code\"><code class=\"language-css\">\/* gestion des dimensions et d\u00e9bordement du conteneur *\/\r\n#slideshow .container {\r\n\tposition:relative;\r\n\twidth: 640px;\r\n\theight: 310px;\r\n\toverflow: hidden;\r\n}\r\n\t\r\n\/* on pr\u00e9voit un petit espace gris pour la timeline *\/\r\n#slideshow .container:after {\r\n\tposition:absolute;\r\n\tbottom: 0; left:0;\r\n\tcontent: \" \";\r\n\twidth: 100%;\r\n\theight: 1px;\r\n\tbackground: #999;\r\n}\r\n\/* \r\n   le conteneur des slides\r\n   en largeur il fait 100% x le nombre de slides\r\n*\/\r\n#slideshow .slider {\r\n\tposition: absolute;\r\n\tleft:0; top:0;\r\n\twidth: 400%;\r\n\theight: 310px;\r\n}\r\n\r\n\/* annulation des marges sur figure *\/\r\n#slideshow figure {\r\n\tposition:relative;\r\n\tdisplay:inline-block;\r\n\tpadding:0; margin:0;\r\n}\r\n\/* petit effet de vignette sur les images *\/\r\n#slideshow figure:after {\r\n\tposition: absolute;\r\n\tdisplay:block;\r\n\tcontent: \" \";\r\n\ttop:0; left:0;\r\n\twidth: 100%; height: 100%;\r\n\tbox-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;\r\n}<\/code><\/pre>\n<p class=\"center\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-2503\" title=\"\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-2.jpg\" alt=\"\" width=\"600\" height=\"296\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-2.jpg 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-2-300x148.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Nous voici sur une mise en forme plus propre, les \u00e9l\u00e9ments <code class=\"element\">figure<\/code> sont plac\u00e9s sur une seule et m\u00eame ligne et le d\u00e9bordement est cach\u00e9.<br \/>\nIl ne nous reste plus qu&rsquo;\u00e0 pr\u00e9senter un peu mieux notre l\u00e9gende qui est actuellement planqu\u00e9e :<\/p>\n<pre class=\"code\"><code class=\"language-css\">\/* styles de nos l\u00e9gendes *\/\r\n#slideshow figcaption {\r\n\tposition:absolute;\r\n\tleft:0; right:0; bottom: 5px;\r\n\tpadding: 20px;\r\n\tmargin:0;\r\n\tborder-top: 1px solid rgb(225,225,225);\r\n\ttext-align:center;\r\n\tletter-spacing: 0.05em;\r\n\tword-spacing: 0.05em;\r\n\tfont-family: Georgia, Times, serif;\r\n\tbackground: #fff;\r\n\tbackground: rgba(255,255,255,0.7);\r\n\tcolor: #555;\r\n\ttext-shadow: -1px -1px 0 rgba(255,255,255,0.3);\r\n}<\/code><\/pre>\n<p class=\"center\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-2504\" title=\"\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-3.jpg\" alt=\"\" width=\"600\" height=\"99\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-3.jpg 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-3-300x49.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Et voil\u00e0 qui est mieux.<\/p>\n<p>Nous allons maintenant nous occuper de la phase automatique du slideshow.<br \/>\nNous verrons dans une troisi\u00e8me partie comment g\u00e9rer des actions pour contr\u00f4ler notre slideshow.<\/p>\n<h2 id=\"autoslide\">Animer notre contenu : phase automatique<\/h2>\n<p>Cette phase va \u00eatre quelque peu r\u00e9p\u00e9titive puisque nous allons devoir cr\u00e9er un certain nombre d&rsquo;animations gr\u00e2ce \u00e0 la fonction CSS <a title=\"Documentation du W3C en anglais\" href=\"http:\/\/www.w3.org\/TR\/css3-animations\/\" hreflang=\"en\"><code>@keyframes<\/code><\/a>. Pour en savoir plus sur les animations, je vous invite \u00e0 lire la partie \u00ab\u00a0animation\u00a0\u00bb de cet <a href=\"http:\/\/www.alsacreations.com\/tuto\/lire\/1299-timing-des-animations-et-des-transitions-en-css3.html\">article sur le timing<\/a> sur Alsacr\u00e9ations.<\/p>\n<p>Pour obtenir une animation coh\u00e9rente tout le long d&rsquo;un cycle, vous devez vous poser la question suivante :<br \/>\n<q>Combien de temps est n\u00e9cessaire pour la compr\u00e9hension de chaque slide ?<\/q><\/p>\n<p>Bien entendu, la r\u00e9ponse va d\u00e9pendre du contenu, mais imaginons que nous ayons 4 \u00e9tapes, pas beaucoup de texte, 6 ou 7 secondes peuvent sembler suffisantes pour chaque \u00e9tape. Il reste alors \u00e0 estimer la dur\u00e9e d&rsquo;une transition d&rsquo;une \u00e9tape \u00e0 l&rsquo;autre, 1 ou 2 secondes. Avec 8 secondes multipli\u00e9es par 4, \u00e7a nous fait <strong>32 secondes d&rsquo;animation<\/strong> pour boucler un cycle complet.<\/p>\n<h3 id=\"container-animation\">Animation du conteneur<\/h3>\n<p class=\"center\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-2518\" title=\"\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-4.jpg\" alt=\"\" width=\"600\" height=\"178\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-4.jpg 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-4-300x89.jpg 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Commen\u00e7ons par animer le bloc qui contient nos images et l\u00e9gendes en le faisant glisser. Pour cela, cr\u00e9ons notre animation :<\/p>\n<pre class=\"code\"><code class=\"language-css\">\/* fonction d'animation, n'oubliez pas de prefixer ! *\/\r\n@keyframes slider {\r\n\t0%, 20%, 100%\t{ left: 0 }\r\n\t25%, 45%\t\t{ left: -100% }\r\n\t50%, 70%\t\t{ left: -200% }\r\n\t75%, 95%\t\t{ left: -300% }\r\n}<\/code><\/pre>\n<p>N&rsquo;oubliez pas de pr\u00e9fixer \u00e9galement la r\u00e8gle @keyframes (oui ! Il faudra s&#8217;emb\u00eater \u00e0 dupliquer le code de l&rsquo;animation) de la sorte : <code>@-webkit-keyframes slider {[\u2026]} @-moz-keyframes slider {[\u2026]}<\/code>, etc.<\/p>\n<p>Chaque \u00e9tape est exprim\u00e9e en pourcentage, aussi 50% signifie que nous en sommes \u00e0 la 16<sup>i\u00e8me<\/sup> seconde de notre animation.<br \/>\nSi plusieurs \u00e9tapes ont la m\u00eame valeur d&rsquo;une propri\u00e9t\u00e9, ou si vous souhaitez cr\u00e9er un arr\u00eat, il suffit de mettre la valeur sur la m\u00eame ligne s\u00e9parer par une virgule.<br \/>\nPar exemple, sur la premi\u00e8re \u00e9tape, nous avons 0, 20 et 100% qui cohabitent. Cela sous entend que de 0 \u00e0 20%, la valeur de <code>left<\/code> est de 0, nous cr\u00e9ons donc un arr\u00eat. Cela signifie aussi que de 95 \u00e0 100%, la valeur de <code>left<\/code> passe de -300% \u00e0 0. C&rsquo;est un moyen facile de retourner \u00e0 la valeur initiale pour cr\u00e9er une boucle.<\/p>\n<p>Nous avons cr\u00e9er l&rsquo;animation, il faut maintenant l&rsquo;attribuer \u00e0 notre \u00e9l\u00e9ment de cette mani\u00e8re :<\/p>\n<pre class=\"code\"><code class=\"language-css\">\/* compl\u00e9tez le s\u00e9lecteur : *\/\r\n#slideshow .slider {\r\n\t\/* ... avec la propri\u00e9t\u00e9 animation *\/\r\n\tanimation: slider 32s infinite;\r\n}<\/code><\/pre>\n<p>Cette syntaxe de la propri\u00e9t\u00e9 <code>animation<\/code> est le raccourci de <code>animation-name<\/code>, <code>animation-duration<\/code>, <code>animation-iteration-count<\/code>, dans cet ordre pr\u00e9cis\u00e9ment ici.<\/p>\n<h3 id=\"timeline-animation\">Animation de la ligne de temps<\/h3>\n<p class=\"center\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-2518\" title=\"\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-5.jpg\" alt=\"\" width=\"600\" height=\"178\" \/><\/p>\n<p>Notre petite ligne d&rsquo;un pixel de hauteur servant de ligne de temps va \u00eatre anim\u00e9e sur le m\u00eame principe.<br \/>\nMais avant cela, donnons-lui quelques styles de couleur.<\/p>\n<pre class=\"code\"><code class=\"language-css\">#timeline {\r\n\tposition: absolute;\r\n\tbackground: #999;\r\n\tbottom: 15px;\r\n\tleft: 15px;\r\n\theight: 1px;\r\n\tbackground: rgb(214,98,13);\r\n\tbackground: rgba(214,98,13,.8);\r\n\twidth: 0;\r\n\t\/* fonction d'animation *\/\r\n\tanimation: timeliner 32s infinite;\r\n}<\/code><\/pre>\n<p>Il est ainsi plac\u00e9 pr\u00e9cis\u00e9ment en tenant compte des marges autour des photos, et nous lui attribuons tout de suite une animation nomm\u00e9e <code>timeliner<\/code> qu&rsquo;il nous faut d\u00e9clarer comme ceci :<\/p>\n<pre class=\"code\"><code class=\"language-css\">@keyframes timeliner {\r\n\t0%, 25%, 50%, 75%, 100%\t{ width: 0;\t\t}\r\n\t20%, 45%, 70%, 90%\t\t{ width: 640px;\t}\r\n}<\/code><\/pre>\n<p>Ici nous savons que la ligne doit \u00eatre \u00e0 son maximum \u00e0 quatre reprise (avant chaque changement de slide). Il y a donc 4 \u00e9tapes \u00e0 640px (largeur max), et 4 (si on confond 0 et 100) \u00e0 0.<\/p>\n<h3 id=\"caption-animation\">Animation de la l\u00e9gende<\/h3>\n<p class=\"center\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-2518\" title=\"\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-6.jpg\" alt=\"\" width=\"600\" height=\"178\" \/><\/p>\n<p>M\u00eame proc\u00e9d\u00e9, nous allons faire monter et descendre notre l\u00e9gende \u00e0 chaque slide.<\/p>\n<pre class=\"code\"><code class=\"language-css\">@keyframes figcaptionner {\r\n\t0%, 25%, 50%, 75%, 100%\t\t\t\t\t\t{ bottom: -55px;\t}\r\n\t5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%\t\t{ bottom: 5px;\t\t}\r\n}<\/code><\/pre>\n<p>Puis nous accrochons cette animation \u00e0 notre \u00e9l\u00e9ment :<\/p>\n<pre class=\"code\"><code class=\"language-css\">\/* ajouter \u00e0 l'\u00e9l\u00e9ment : *\/\r\n#slideshow figcaption {\r\n\t\/* ... la propri\u00e9t\u00e9 animation *\/\r\n\tanimation: figcaptionner 32s infinite;\r\n}<\/code><\/pre>\n<p>Je ne sais pas si vous avez vu, mais le vignettage des slides est anim\u00e9. Comme vous avez compris le principe, je vous laisse vous amuser \u00e0 trouver le code \ud83d\ude09<\/p>\n<p>Nous avons d\u00e9sormais un slideshow qui fonctionne en mode automatique.<br \/>\nMaintenant, voyons comment proc\u00e9der si l&rsquo;on souhaite ajouter des boutons stop\/marche, et suivant\/pr\u00e9c\u00e9dent, ou \u00ab\u00a0aller \u00e0 la slide 3\u00a0\u00bb, par exemple.<\/p>\n<h2 id=\"manuel\">Contr\u00f4ler notre contenu : phase manuelle<\/h2>\n<p>Lorsque l&rsquo;on con\u00e7oit un slideshow, il est tr\u00e8s recommand\u00e9 de permettre \u00e0 l&rsquo;utilisateur de stopper l&rsquo;animation, soit parce que \u00e7a le stresse, soit parce qu&rsquo;il veut contempler une des images, soit\u2026 bref, voyons ce qu&rsquo;on peut faire !<\/p>\n<p>Pour rappel, nous n&rsquo;avons encore aucun \u00e9l\u00e9ment HTML pour ces contr\u00f4les, nous allons donc les rajouter progressivement.<br \/>\nCes \u00e9l\u00e9ments de contr\u00f4les (des liens) vont cibler des ancres plac\u00e9s \u00ab\u00a0\u00e0 c\u00f4t\u00e9\u00a0\u00bb de notre slideshow, en tant que fr\u00e8res indirects.<\/p>\n<p>Juste avant notre \u00e9l\u00e9ment <code>#slideshow<\/code>, placez donc ces \u00e9l\u00e9ments <code class=\"element\">span<\/code> :<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;span id=\"sl_play\" class=\"sl_command\"&gt;&lt;\/span&gt;\r\n&lt;span id=\"sl_pause\" class=\"sl_command\"&gt;&lt;\/span&gt;\r\n\u00a0\r\n&lt;span id=\"sl_i1\" class=\"sl_command sl_i\"&gt;&lt;\/span&gt;\r\n&lt;span id=\"sl_i2\" class=\"sl_command sl_i\"&gt;&lt;\/span&gt;\r\n&lt;span id=\"sl_i3\" class=\"sl_command sl_i\"&gt;&lt;\/span&gt;\r\n&lt;span id=\"sl_i4\" class=\"sl_command sl_i\"&gt;&lt;\/span&gt;<\/code><\/pre>\n<p>Ceux-ci ont des classes communes (parfois) qui nous permettrons des actions group\u00e9es par la suite.<br \/>\nVous comprendrez leur utilit\u00e9 par la suite, ne vous faites pas de souci.<\/p>\n<h3 id=\"play-stop-button\">Bouton jouer et arr\u00eater<\/h3>\n<p><img decoding=\"async\" class=\"alignleft size-full wp-image-2538\" title=\"\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-stop.jpg\" alt=\"\" width=\"90\" height=\"90\" \/> Les boutons play et pause peuvent \u00eatre ajout\u00e9s dans la section <code>#slideshow<\/code>, juste avant notre <code>.container<\/code>.<\/p>\n<p>Il n&rsquo;y a aucune obligation \u00e0 les placer pr\u00e9cis\u00e9ment ici, il est g\u00e9n\u00e9ralement conseill\u00e9 de conserver ordre d&rsquo;apparition dans le DOM et ordre d&rsquo;apparition \u00e0 la lecture de la page. L\u00e0 nous allons les placer au milieu (verticalement) du slideshow :<\/p>\n<pre class=\"code\"><code class=\"html\">&lt;a class=\"play_commands pause\" href=\"#sl_pause\" title=\"Maintain paused\"&gt;Pause&lt;\/a&gt;\r\n&lt;a class=\"play_commands play\" href=\"#sl_play\" title=\"Play the animation\"&gt;Play&lt;\/a&gt;<\/code><\/pre>\n<p>Ces \u00e9l\u00e9ments peuvent prendre leur apparence avec quelques lignes de code uniquement, et sont par d\u00e9faut cach\u00e9s : ils n&rsquo;apparaissent qu&rsquo;\u00e0 certains moments bien pr\u00e9cis que nous d\u00e9finirons par la suite.<\/p>\n<pre class=\"code\"><code class=\"language-css\">.play_commands {\r\n\t\/* positionnement en haut \u00e0 droite *\/ \r\n\tposition: absolute;\r\n\ttop: 25px; right: 25px;\r\n\tz-index: 10;\r\n\t\/* dimensionnement des ic\u00f4nes *\/\r\n\twidth: 22px;\r\n\theight: 22px;\r\n\ttext-indent: -9999px;\r\n\tborder:0 none;\r\n\t\/* placez l'opacit\u00e9 \u00e0 1 si vous souhaitez voir les commandes *\/\r\n\topacity: 0;\r\n\t\/* pr\u00e9paration de transition sur opacicty et right *\/\r\n\ttransition: opacity 1s, right 1s;\r\n}\r\n\/* on d\u00e9cale play l\u00e9g\u00e8rement sur la gauche *\/\r\n.play { right: 55px; cursor: default; }\r\n\u00a0\r\n\/* cr\u00e9ation de l'ic\u00f4ne pause avec 2 pseudos \u00e9l\u00e9ments *\/\r\n.pause:after,\r\n.pause:before {\r\n\tposition: absolute;\r\n\tdisplay: block;\r\n\tcontent: \" \";\r\n\ttop:0;\r\n\twidth:38%;\r\n\theight: 22px;\r\n\tbackground: #fff;\r\n\tbackground: rgba(255,255,255,0.5);\r\n}\r\n.pause:after { right:0; }\r\n.pause:before {\tleft:0; }\r\n\u00a0\r\n\/* cr\u00e9ation de l'ic\u00f4ne play avec des bordures *\/\r\n.play {\r\n\twidth: 1px; \r\n\theight: 1px; \r\n\t\/* les transparentes forment la fl\u00e8che *\/\r\n\tborder-top: 10px solid transparent;\r\n\tborder-bottom: 10px solid transparent;\r\n\tborder-left: 20px solid #fff; \r\n\tborder-left: 20px solid rgba(255,255,255,0.5); \r\n\t\/* renseignez 1 pour voir l'ic\u00f4ne de suite *\/\r\n\topacity: 0;\r\n}\r\n\u00a0\r\n\/* apparition du bouton pause au survole *\/\r\n\/* apparition des boutons au focus *\/\r\n#slideshow:hover .pause,\r\n.play_commands:focus {\r\n\topacity: 1;\r\n\toutline: none;\r\n}<\/code><\/pre>\n<p>Voil\u00e0, toutes ces lignes pour mettre en place nos deux liens. Ceux qui trouveront plus pertinent de charger des images ou un sprite, je ne leur en voudrais pas.<br \/>\nC&rsquo;est bien, c&rsquo;est beau, mais pas fonctionnel.<\/p>\n<p>Nous allons maintenant utiliser la pseudo classe <code class=\"pseudo-class\">target<\/code> pour agir sur notre animation en fonction du bouton que nous aurons cliqu\u00e9.<br \/>\nLorsque pause est cliqu\u00e9, nous ciblons l&rsquo;\u00e9l\u00e9ment <code>#sl_pause<\/code>, lorsque lecture est cliqu\u00e9, c&rsquo;est <code>#sl_play<\/code> qui est cibl\u00e9.<br \/>\nDans notre sc\u00e9nario, nous n&rsquo;afficherons que le bouton utile : pause quand la lecture est effective, play lorsque la pause est en place.<\/p>\n<pre class=\"code\"><code class=\"language-css\">\/* stopper les animation *\/\r\n.sl_command:target ~ #slideshow .slider,\r\n.sl_command:target ~ #slideshow figcaption,\r\n.sl_command:target ~ #slideshow #timeline,\r\n.sl_command:target ~ #slideshow .dots_commands li:first-child a:after {\r\n\tanimation-play-state: paused;\r\n}\r\n\u00a0\r\n\/* red\u00e9marrer les animations *\/\r\n#sl_play:target ~ #slideshow .slider,\r\n#sl_play:target ~ #slideshow figcaption,\r\n#sl_play:target ~ #slideshow #timeline,\r\n#sl_play:target ~ #slideshow .dots_commands li:first-child a:after {\r\n\tanimation-play-state: running;\r\n}\r\n\u00a0\r\n\/* switch entre les boutons *\/\r\n.sl_command:target ~ #slideshow .pause \t\t{ opacity:0; }\r\n#sl_play:target ~ #slideshow:hover .pause,\r\n#sl_play:target ~ #slideshow .pause:focus \t{ opacity:1; }\r\n.sl_command:target ~ #slideshow .play \t\t{ opacity:1; right: 25px; cursor: pointer; }\r\n#sl_play:target ~ #slideshow .play \t\t\t{ opacity:0; right: 55px; cursor: default; }<\/code><\/pre>\n<p>Le premier bloc permet de stopper les animations gr\u00e2ce \u00e0 la propri\u00e9t\u00e9 <code>animation-play-state<\/code>. Cette propri\u00e9t\u00e9 plac\u00e9e \u00e0 sa valeur <code>paused<\/code> permet de figer l&rsquo;animation.<br \/>\nLes s\u00e9lecteurs sont assez sp\u00e9ciaux : <code>.sl_command:target ~ #slideshow .slider<\/code> permet de cibler \u00ab\u00a0L&rsquo;\u00e9l\u00e9ment <code>.slider<\/code> fils de <code>#slideshow<\/code> lorsque ce dernier est indirectement fr\u00e8re de <code>.sl_command<\/code>, uniquement lorsque ce dernier est cibl\u00e9.\u00a0\u00bb. Autrement dit : si <code>.sl_command<\/code> est cibl\u00e9, alors on va chercher le fr\u00e8re <code>#slideshow<\/code> puis son fils <code>.slider<\/code> pour lui appliquer un stop.<br \/>\nOn proc\u00e8de de la m\u00eame mani\u00e8re pour les autres \u00e9l\u00e9ments (<code>figcaption<\/code>, <code>#timeline<\/code> et <code>.dots_commands<\/code> que nous verrons plus tard dans le bonux) qui ont une animation en route \u00e9galement.<br \/>\nPour en savoir plus sur les s\u00e9lecteurs d&rsquo;adjacence indirecte, lisez cet autre article du blog : <a href=\"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/selecteur-dadjacence-indirecte-en-css3\">S\u00e9lecteur d&rsquo;adjacence indirecte en CSS3<\/a>.<\/p>\n<p>Le dernier bloc de code permet d&rsquo;afficher les boutons en fonction de situation pr\u00e9cise, je vous laisse essayer de d\u00e9cortiquer leur signification.<\/p>\n<h3 id=\"bonux-prev-next\">Bonux : Les fl\u00e8ches \u00ab\u00a0suivant\u00a0\u00bb et \u00ab\u00a0pr\u00e9c\u00e9dent\u00a0\u00bb<\/h3>\n<p><img decoding=\"async\" class=\"alignleft size-full wp-image-2539\" title=\"\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-next.jpg\" alt=\"\" width=\"90\" height=\"90\" \/> Il va nous falloir une paire de liens par \u00e9tape de notre slideshow en gardant en t\u00eate que la fl\u00e8che de gauche de notre premi\u00e8re slide nous permet d&rsquo;aller \u00e0 la derni\u00e8re, la fl\u00e8che de droite de notre derni\u00e8re slide nous permet d&rsquo;aller \u00e0 la premi\u00e8re (vous me suivez ?). Lisez les <code>title<\/code> pour comprendre l&rsquo;utilit\u00e9 de chaque fl\u00e8che. Vous pouvez placer ces liens apr\u00e8s nos deux liens pause et lecture.<\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;a class=\"commands prev commands1\" href=\"#sl_i4\" title=\"Aller \u00e0 la derni\u00e8re slide\"&gt;&amp;lt;&lt;\/a&gt;\r\n&lt;a class=\"commands next commands1\" href=\"#sl_i2\" title=\"Aller \u00e0 la 2\u00e8me slide\"&gt;&amp;gt;&lt;\/a&gt;\r\n&lt;a class=\"commands prev commands2\" href=\"#sl_i1\" title=\"Aller \u00e0 la 1\u00e8re slide\"&gt;&amp;lt;&lt;\/a&gt;\r\n&lt;a class=\"commands next commands2\" href=\"#sl_i3\" title=\"Aller \u00e0 la 3\u00e8me slide\"&gt;&amp;gt;&lt;\/a&gt;\r\n&lt;a class=\"commands prev commands3\" href=\"#sl_i2\" title=\"Aller \u00e0 la 2\u00e8me slide\"&gt;&amp;lt;&lt;\/a&gt;\r\n&lt;a class=\"commands next commands3\" href=\"#sl_i4\" title=\"Aller \u00e0 la 4\u00e8me slide\"&gt;&amp;gt;&lt;\/a&gt;\r\n&lt;a class=\"commands prev commands4\" href=\"#sl_i3\" title=\"Aller \u00e0 la 3\u00e8me slide\"&gt;&amp;lt;&lt;\/a&gt;\r\n&lt;a class=\"commands next commands4\" href=\"#sl_i1\" title=\"Aller \u00e0 la 1\u00e8re slide\"&gt;&amp;gt;&lt;\/a&gt;<\/code><\/pre>\n<p>C&rsquo;est l\u00e0 que la pertinence du markup en prend un coup. Pour des raisons d&rsquo;accessibilit\u00e9 (clavier ici) ces liens ne sont peut-\u00eatre pas des plus utiles et pratiques \u00e0 utiliser. Est peut-\u00eatre \u00e0 envisager l&rsquo;ajout de l&rsquo;attribut <code>tabindex=\"-1\"<\/code> pour emp\u00eacher le focus sur ces \u00e9l\u00e9ments. En effet, nous utiliserons un second syst\u00e8me de navigation juste apr\u00e8s, qui lui est peut-\u00eatre plus pertinent.<br \/>\nDonnons quelques styles \u00e0 nos boutons et cachons ceux qui ne sont pas utiles.<\/p>\n<pre class=\"code\"><code class=\"language-css\">#slideshow .commands {\r\n\tposition: absolute;\r\n\ttop: 45%;\r\n\tpadding: 5px 13px;\r\n\tborder-bottom:0;\r\n\tfont-size: 1.3em;\r\n\tcolor: #aaa;\r\n\ttext-decoration:none;\r\n\tbackground-color: #eee;\r\n\tbackground-image: linear-gradient(#fff,#ddd);\r\n\ttext-shadow: 0 0 1px #aaa;\r\n\tborder-radius: 50%;\r\n\tbox-shadow: 1px 1px 2px rgba(0,0,0,0.2);\r\n}\r\n\u00a0\r\n#slideshow .prev { left: -48px; }\r\n#slideshow .next { right: -48px; }\r\n\u00a0\r\n#slideshow .commands { display:none; }\r\n#slideshow .commands1 {\tdisplay: block; }<\/code><\/pre>\n<p>Tr\u00e8s bien, nous avons des fl\u00e8ches\u2026 mais que va-t-on bien pouvoir bouger avec ?<br \/>\nSur le m\u00eame principe que pr\u00e9c\u00e9demment, nous ciblons l&rsquo;un des <code class=\"element\">span<\/code> abandonn\u00e9s en d\u00e9but de code. Si vous cliquez sur une des fl\u00e8ches, pour le moment \u00e7a ne fait que stopper l&rsquo;animation (oui, tous les <code class=\"element\">span<\/code> sont porteurs de la classe <code>.sl_command<\/code>, rappelez-vous, en en ciblant un, les animations s&rsquo;arr\u00eate).<br \/>\nEn fonction de l&rsquo;\u00e9l\u00e9ment cibl\u00e9, on pourrait stopper l&rsquo;animation et changer les valeurs de <code>left<\/code> pour le slider, de <code>width<\/code> pour la timeline, et de <code>bottom<\/code> pour la l\u00e9gende. \u00c7a serait cool hein ?<br \/>\nOui mais non, parce qu&rsquo;en fait \u00e7a ne fonctionne pas : <a title=\"Exp\u00e9rimentations parfois foireuses en CSS - Article du blog Creative Juiz\" href=\"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/astuces-html-css-experimentations-parfois-foireuses#keyframes-is-too-strong\">les keyframes sont \u00ab\u00a0prioritaires\u00a0\u00bb<\/a>.<\/p>\n<p>C&rsquo;est ce qui nous oblige \u00e0 compl\u00e9ter notre code HTML l\u00e9g\u00e8rement avec ce petit morceau :<\/p>\n<pre class=\"code\"><code class=\"html boc-nocontrols boc-nogutter\">&lt;div class=\"c_slider\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>Il est <strong>d\u00e9j\u00e0 pr\u00e9sent dans le code<\/strong> fourni initialement (premier bloc de cet article).<\/p>\n<p>Cet \u00e9l\u00e9ment nous permet d&rsquo;appliquer les images en image de fond. Ces m\u00eames images que nous avons d\u00e9j\u00e0 charg\u00e9 dans le HTML, nous allons les appliquer en background CSS.<br \/>\nC&rsquo;est en faisant bouger ce nouvel \u00e9l\u00e9ment que nous allons donner l&rsquo;illusion d&rsquo;un slideshow classique. Je dis bien illusion, car vous aurez compris qu&rsquo;ici on se restreint \u00e0 l&rsquo;id\u00e9e d&rsquo;un vrai diaporama, avec des images, et non du contenu textuel qu&rsquo;il serait difficile de \u00ab\u00a0dupliquer\u00a0\u00bb.<\/p>\n<pre class=\"code\"><code class=\"language-css\">#slideshow .c_slider {\r\n\tposition: absolute;\r\n\tleft:0; top:0;\r\n\twidth: 400%;\r\n\theight: 310px;\r\n\t\/* multiple background *\/\r\n\tbackground: url(img\/dummy-640x310-1.jpg) 0 0 no-repeat,\r\n\t            url(img\/dummy-640x310-2.jpg) 640px 0 no-repeat,\r\n\t            url(img\/dummy-640x310-3.jpg) 1280px 0 no-repeat,\r\n\t            url(img\/dummy-640x310-4.jpg) 1920px 0 no-repeat;\r\n\ttransition: background 1s;\r\n}<\/code><\/pre>\n<p>Cette division fournie de quelques images est cach\u00e9e par la partie principale du diaporama pour le moment. Lorsque nous ciblerons le contenu avec l&rsquo;une de nos fl\u00e8ches \u00ab\u00a0suivant\u00a0\u00bb ou \u00ab\u00a0pr\u00e9c\u00e9dent\u00a0\u00bb, nous cacherons ce diaporama automatique (qui se sera stopp\u00e9) pour d\u00e9couvrir nos slides contr\u00f4lables qui bougeront en fonction de l&rsquo;\u00e9l\u00e9ment cibl\u00e9.<br \/>\nVous n&rsquo;allez pas m&rsquo;aimer\u2026 :<\/p>\n<pre class=\"code\"><code class=\"language-css\">\/* on cache le slider *\/\r\n.sl_i:target ~ #slideshow .slider\t\t\t\t\t\t\t\t\t{ visibility: hidden }\r\n\/* on planque la 1\u00e8re pastille (cf. bonux suivant) *\/\r\n.sl_i:target ~ #slideshow .dots_commands li:first-child a:after\t\t{ display:none; }\r\n\/* pour afficher la 2\u00e8me pastille (cf. bonux suivant) *\/\r\n.sl_i:target ~ #slideshow .dots_commands li:first-child a:before\t{ display:block; }\r\n\u00a0\r\n\/* lorsque on cible le premier slider *\/\r\n\/* on cache tous les \"pr\u00e9c\u00e9dent\" et \"suivant\" *\/\r\n#sl_i1:target ~ #slideshow .commands\t\t\t\t\t\t\t\t{ display: none; }\r\n\/* on affiche seulement deux fl\u00e8ches *\/\r\n#sl_i1:target ~ #slideshow .commands1\t\t\t\t\t\t\t\t{ display: block; }\r\n\/* correspond au d\u00e9calage des images *\/\r\n#sl_i1:target ~ #slideshow .c_slider\t\t\t\t\t\t\t\t{ background-position: 0 0, 640px 0, 1280px 0, 1920px 0; }\r\n\/* on place la pastille tout \u00e0 gauche *\/\r\n#sl_i1:target ~ #slideshow .dots_commands li:first-child a:before\t{ left:0; }\r\n\u00a0\r\n\/* m\u00eame proc\u00e9d\u00e9 lorsqu'on cible le second slide *\/\r\n#sl_i2:target ~ #slideshow .commands\t\t\t\t\t\t\t\t{ display: none; }\r\n#sl_i2:target ~ #slideshow .commands2\t\t\t\t\t\t\t\t{ display: block; }\r\n#sl_i2:target ~ #slideshow .c_slider\t\t\t\t\t\t\t\t{ background-position: -640px 0, 0 0, 640px 0, 1280px 0; }\r\n#sl_i2:target ~ #slideshow .dots_commands li:first-child a:before\t{ left:18px; }\r\n\u00a0\r\n\/* puis le 3\u00e8me *\/\r\n#sl_i3:target ~ #slideshow .commands\t\t\t\t\t\t\t\t{ display: none; }\r\n#sl_i3:target ~ #slideshow .commands3\t\t\t\t\t\t\t\t{ display: block; }\r\n#sl_i3:target ~ #slideshow .c_slider\t\t\t\t\t\t\t\t{ background-position: -1280px 0, -640px 0, 0 0, 640px 0; }\r\n#sl_i3:target ~ #slideshow .dots_commands li:first-child a:before\t{ left:36px; }\r\n\u00a0\r\n\/* et enfin le 4\u00e8me *\/\r\n#sl_i4:target ~ #slideshow .commands\t\t\t\t\t\t\t\t{ display: none; }\r\n#sl_i4:target ~ #slideshow .commands4\t\t\t\t\t\t\t\t{ display: block; }\r\n#sl_i4:target ~ #slideshow .c_slider\t\t\t\t\t\t\t\t{ background-position: -1920px 0, -1280px 0, -640px 0, 0 0; }\r\n#sl_i4:target ~ #slideshow .dots_commands li:first-child a:before\t{ left:54px; }<\/code><\/pre>\n<p>\u00c0 chaque \u00e9tape nous d\u00e9pla\u00e7ons les images, cachons tous les liens \u00ab\u00a0pr\u00e9c\u00e9dent\u00a0\u00bb et \u00ab\u00a0suivant\u00a0\u00bb sauf ceux dont on peut avoir besoin, et on d\u00e9place la petite pastille de la navigation secondaire (voir bonus qui suit).<\/p>\n<h3 id=\"bonux-pagination\">Bonux : \u00ab\u00a0pagination\u00a0\u00bb pour sauter vers une slide<\/h3>\n<p><img decoding=\"async\" class=\"alignleft size-full wp-image-2546\" title=\"\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2012\/03\/demo-slideshow-css3-dots.jpg\" alt=\"\" width=\"90\" height=\"90\" \/> Vous avez certaine souvent vu ces petits points au pied d&rsquo;un slideshow qui servent un peu de pagination et qui, parfois, permettent de savoir pr\u00e9cis\u00e9ment o\u00f9 on se trouve dans le d\u00e9roulement des slides.<br \/>\nNous allons en cr\u00e9er une. Pour commencer, ajoutons ce code HTML juste apr\u00e8s l&rsquo;\u00e9l\u00e9ment <code>timeline<\/code><\/p>\n<pre class=\"code\"><code class=\"language-markup\">&lt;ul class=\"dots_commands\"&gt;&lt;!--\r\n\t--&gt;&lt;li&gt;&lt;a title=\"Afficher la slide 1\" href=\"#sl_i1\"&gt;Slide 1&lt;\/a&gt;&lt;\/li&gt;&lt;!--\r\n\t--&gt;&lt;li&gt;&lt;a title=\"Afficher la slide 2\" href=\"#sl_i2\"&gt;Slide 2&lt;\/a&gt;&lt;\/li&gt;&lt;!--\r\n\t--&gt;&lt;li&gt;&lt;a title=\"Afficher la slide 3\" href=\"#sl_i3\"&gt;Slide 3&lt;\/a&gt;&lt;\/li&gt;&lt;!--\r\n\t--&gt;&lt;li&gt;&lt;a title=\"Afficher la slide 4\" href=\"#sl_i4\"&gt;Slide 4&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;<\/code><\/pre>\n<p>Puis, ces quelques lignes de CSS pour donner un style bien propre \u00e0 nos petits points.<br \/>\nN&rsquo;h\u00e9sitez pas \u00e0 agrandir les dimensions si \u00e7a vous semble trop petit.<\/p>\n<pre class=\"code\"><code class=\"language-css\">.dots_commands  {\r\n\tpadding:0;\r\n\tmargin:32px 0 0;\r\n\ttext-align: center;\r\n}\r\n.dots_commands li {\r\n\tdisplay: inline;\r\n\tpadding:0; margin:0;\r\n}\r\n.dots_commands a {\r\n\tposition: relative;\r\n\tdisplay: inline-block;\r\n\theight:8px; width: 8px;\r\n\tmargin: 0 5px;\r\n\ttext-indent: -9999px;\r\n\tbackground: #fff;\r\n\u00a0\r\n\tborder-radius: 50%;\r\n\tbox-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;\r\n\r\n}\r\n\/* quelques styles au focus *\/\r\n.dots_commands a:focus { \r\n\toutline: none;\r\n\tbackground: orange;\r\n}\r\n.dots_commands li:first-child a { z-index: 25; }<\/code><\/pre>\n<p>Rien de sorcier ici.<br \/>\nOn s&rsquo;assure simplement en derni\u00e8re ligne que le premier \u00e9l\u00e9ment ait un z-index sup\u00e9rieur aux autres. Nous allons nous en servir pour l&rsquo;animation qui suit.<\/p>\n<p>Nous allons cr\u00e9er un petit disque par dessus ces puces pour repr\u00e9senter le slide visible par un point d&rsquo;une couleur diff\u00e9rente. Pour ce faire nous utilisons les pseudo-\u00e9l\u00e9ments.<\/p>\n<pre class=\"code\"><code class=\"language-css\">\/* on style after et before, on utilisera les deux *\/\r\n.dots_commands li:first-child a:after,\r\n.dots_commands li:first-child a:before {\r\n\tposition: absolute;\r\n\ttop: 0; left: 0;\r\n\tcontent: \" \";\r\n\twidth: 8px; height: 8px;\r\n\tbackground: #bd9b83;\r\n\tz-index:20;\r\n\r\n\tborder-radius: 50%;\r\n\tbox-shadow: 0 1px 2px rgba(0,0,0,0.55) inset;\r\n}\r\n\/* on anime \"after\" *\/\r\n.dots_commands li:first-child a:after {\r\n\tanimation: dotser 32s infinite;\r\n}\r\n\/* on cache \"before\", on l'utilise uniquement au clic (cf. bonux pr\u00e9c\u00e9dent) *\/\r\n.dots_commands li:first-child a:before { display:none; }\r\n\u00a0\r\n\/* c'est parti pour l'animation ! *\/\r\n@keyframes dotser {\r\n\t0%, 100% \t{ opacity: 1; left: 0; \t\t}\r\n\u00a0\t\t\r\n\t20%\t\t\t{ opacity: 1; left: 0;\t\t}\r\n\t22%\t\t\t{ opacity: 0; left: 0;\t\t}\r\n\t23%\t\t\t{ opacity: 0; left: 18px;\t}\r\n\t25%\t\t\t{ opacity: 1; left: 18px;\t}\r\n\u00a0\t\t\r\n\t45%\t\t\t{ opacity: 1; left: 18px;\t}\r\n\t47%\t\t\t{ opacity: 0; left: 18px;\t}\r\n\t48%\t\t\t{ opacity: 0; left: 36px;\t}\r\n\t50%\t\t\t{ opacity: 1; left: 36px;\t}\r\n\u00a0\t\t\r\n\t70%\t\t\t{ opacity: 1; left: 36px;\t}\r\n\t72%\t\t\t{ opacity: 0; left: 36px;\t}\r\n\t73%\t\t\t{ opacity: 0; left: 54px;\t}\r\n\t75%\t\t\t{ opacity: 1; left: 54px;\t}\r\n\u00a0\t\t\r\n\t95%\t\t\t{ opacity: 1; left: 54px;\t}\r\n\t97%\t\t\t{ opacity: 0; left: 54px;\t}\r\n\t98%\t\t\t{ opacity: 0; left: 0;\t}\r\n}<\/code><\/pre>\n<p>Comme nous l&rsquo;avons pr\u00e9vu dans notre bonus pr\u00e9c\u00e9dent, nous n&rsquo;avons rien besoin de g\u00e9rer en plus. Ces liens ciblent les m\u00eames \u00e9l\u00e9ments que nos fl\u00e8ches lat\u00e9rales et ont donc le m\u00eame effet. (stop de l&rsquo;animation et slide contr\u00f4lable avec tous les effets qui y sont li\u00e9s)<br \/>\nL&rsquo;animation peut sembler compliqu\u00e9e, mais c&rsquo;est la logique de \u00ab\u00a0disparition, d\u00e9placement, apparition\u00a0\u00bb multipli\u00e9 par 4 (4 \u00e9tapes). Pour information, jusqu&rsquo;\u00e0 tr\u00e8s r\u00e9cemment, <a title=\"Article sur les animations des pseudo \u00e9l\u00e9ments sous Webkit\" href=\"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/astuces-html-css-experimentations-parfois-foireuses#pseudo-element-animated-webkit\">Google Chrome avait du mal avec les animations sur before ou after<\/a>. Je ne sais pas si \u00e7a a chang\u00e9, il me semble.<\/p>\n<p>Et on en restera l\u00e0 !<\/p>\n<p class=\"center\"><a class=\"demonstration\" href=\"\/trytotry\/juizy-slideshow-full-css3-html5\/#sl_i1\" hreflang=\"en\">D\u00e9monstration<\/a><\/p>\n<p>Pour \u00eatre s\u00fbr que tout fonctionne, j&rsquo;ai effectu\u00e9 un test en suivant ce tutoriel et <strong>en pr\u00e9fixant pour Firefox<\/strong> uniquement, voici le r\u00e9sultat : <a href=\"\/blog\/doc\/slideshow-full-css3\/\">Slideshow Full CSS3<\/a>.<\/p>\n<p class=\"message\">Lors de la r\u00e9daction de ce tutoriel certains \u00e9l\u00e9ments comme les infobulles ou le vignettage anim\u00e9s ont \u00e9t\u00e9 volontairement omis pour all\u00e9ger le contenu. Si certaines portions de ce tutoriel restent pour vous un myst\u00e8re \u00e0 cause d&rsquo;un manque d&rsquo;explications, l&rsquo;espace de commentaires est l\u00e0 pour vous \ud83d\ude42<\/p>\n<h2>Analyse personnelle<\/h2>\n<p>Ce qui est bloquant est gourmand en lignes de code ici, c&rsquo;est la volont\u00e9 de vouloir fusionner syst\u00e8me automatique et syst\u00e8me contr\u00f4lable au clavier, souris ou m\u00eame touch\u00e9.<\/p>\n<p>Ce slideshow date de novembre 2011, les techniques se sont multipli\u00e9es, il existe d&rsquo;autres solutions full CSS3 passant par l&rsquo;utilisation d\u00e9tourn\u00e9e des \u00e9l\u00e9ments <code class=\"element\">label<\/code> et <code class=\"element\">input<\/code> de type <code>radio<\/code>. En contr\u00f4lant la valeur de la coche avec la pseudo-classe <code class=\"pseudo-class\">checked<\/code> il est possible d&rsquo;agir sur les \u00e9l\u00e9ments, de la m\u00eame mani\u00e8re que nous le faisons ici avec la pseudo-classe <code class=\"pseudo-class\">target<\/code>.<\/p>\n<p>Je vous invite \u00e0 regarder ce qui peut se faire ailleurs, comme par exemple sur ce <a title=\"Slideshow adaptable en CSS3 (anglais)\" href=\"http:\/\/csscience.com\/responsiveslidercss3\/\" hreflang=\"en\">Slideshow Full CSS3 Responsive<\/a>.<\/p>\n<p>L&rsquo;espace de commentaires est \u00e0 vous !<\/p>\n<div class=\"sources\">\n<h2>Sources et liens utiles<\/h2>\n<ul>\n<li><a title=\"Slideshow Full CSS3, d\u00e9monstration du tutoriel\" href=\"\/trytotry\/juizy-slideshow-full-css3-html5\/#sl_i1\" hreflang=\"en\">Slideshow full CSS3 &#8211; D\u00e9monstration<\/a><\/li>\n<li><a title=\"Exp\u00e9rimentations parfois foireuses en CSS - Article du blog Creative Juiz\" href=\"https:\/\/www.creativejuiz.fr\/blog\/veille-technologique\/astuces-html-css-experimentations-parfois-foireuses#keyframes-is-too-strong\">les keyframes sont \u00ab\u00a0prioritaires\u00a0\u00bb<\/a><\/li>\n<li><a title=\"Slideshow adaptable en CSS3 (anglais)\" href=\"http:\/\/csscience.com\/responsiveslidercss3\/\" hreflang=\"en\">Slideshow Full CSS3 Responsive<\/a><\/li>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-animations\/\" hreflang=\"en\">CSS3 Animations &#8211; W3C<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Si vous suivez le compte @NoupeMag sur Twitter (\u00e7a marche aussi pour mon compte), vous avez certainement vu passer mon slideshow en CSS3 datant de l&rsquo;an dernier. Ce n&rsquo;\u00e9tait pas ma premi\u00e8re tentative de slideshow comme le pr\u00e9sentent ces premier et second travaux datant de mai 2010.<\/p>\n","protected":false},"author":4,"featured_media":2549,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[17,9,12],"tags":[120,428,16,113,378,121],"coauthors":[597],"class_list":["post-2127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-css3","category-tutoriels","category-veille-technologique","tag-animation","tag-css3","tag-html5","tag-slideshow","tag-target","tag-transition"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/2127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=2127"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/2127\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/2549"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=2127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=2127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=2127"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=2127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}