En-tete Astuces divers html et css
Classic Moderne

Créer un slideshow automatique

Je remercie avant tout et vivement le site Creative Juiz qui m'a permis de réaliser le slidshow de ma page d'accueil, comme je le fait depuis longtemps, je vais me servir de son tuto, qui est très bien, pour vous expliquer comment j'ai modifié le code pour arriver à mon résultat.

Je me permet cela, car étant débutant, je me suis vu passer une bonne partie de ma soirée et de la nuit, puis une séance le matin pour adapter à la largeur de div et au nombres d'images voulus.

Mon Chat en boule
Je sieste !!!
Je suis la plus belle !!!
Qu'est-ce que l'on est bien ici !!!


Voici du code HTML (HTML5 en l’occurrence) que j’espère suffisamment parlant:


<section id="slideshow">

<div class="container">
<div class="c_slider"></div>
<div class="slider">
<figure>
<img src="picture/100_0635.JPG" alt="" width="640" height="310" />
<figcaption>Mon Chat en boule</figcaption>
</figure>

<figure>
<img src="picture/S6300109.JPG" alt="" width="640" height="310" />
<figcaption>Je sieste !!!</figcaption>
</figure>

<figure>
<img src="picture/100_0670.JPG" alt="" width="640" height="310" />
<figcaption>Je suis la plus belle !!!</figcaption>
</figure>

<figure>
<img src="picture/100_0668.JPG" alt="" width="640" height="310" />
<figcaption>Qu'est-ce que l'on est bien ici !!!</figcaption>
</figure>
</div>
</div>

<span id="timeline"></span>
</section>


Ce code HTML pourrait être simplifié en prenant le risque de complexifier la CSS, mais cette dernière va déjà l’être suffisamment…

Pour faire simple nous avons une section pour le slideshow qui réunie le conteneur des images (.container), la partie qui glisse (.slider), les différentes images légendées (sous forme de figure > figcaption) et la petite barre de défilement du temps (#timeline).

Voici le code CSS servant principalement à positionner, dimensionner et décorer les différents blocs, que je ne vais pas expliquer dans la mesure où ce n’est pas le cœur de l’article, mais il est un minimum commenté:


#slideshow {
position: relative;
width: 640px;
height: 310px;
padding: 15px;
margin: 0 auto 2em;
border: 1px solid #ddd;
background: #FFF;
/* CSS3 effects */
background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
border-radius: 2px 2px 2px 2px;
box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}

/* avanced box-shadow
* tutorial @
* http://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow
*/
#slideshow:before,
#slideshow:after {
position: absolute;
bottom:16px;
z-index: -10;
width: 50%;
height: 20px;
content: " ";
background: rgba(0,0,0,0.1);
border-radius: 50%;
box-shadow: 0 0 13px rgba(0,0,0, 0.9), 0 20px 10px rgba(0,0,0, 0.9);
}
#slideshow:before {
left:0;
transform: rotate(-10deg);
}
#slideshow:after {
right:0;
transform: rotate(10deg);
}


Ce qui nous donne:



Avec ceci nous avons le support graphique des images. C’est un peu tout cassé, mais vous pouvez voir comment réaliser simplement un élément qui semble assez complexe, notamment au niveau des ombres et dégradés.
Gérons le débordement et l’alignement de tout ce contenu.


/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
position:relative;
width: 640px;
height: 310px;
overflow: hidden;
}

/* on prévoit un petit espace gris pour la timeline */
#slideshow .container:after {
position:absolute;
bottom: 0; left:0;
content: " ";
width: 100%;
height: 1px;
background: #999;
}
/* le conteneur des slides en largeur il fait 100% x le nombre de slides */
#slideshow .slider {
position: absolute;
left:0; top:0;
width: 400%;
height: 310px;
}

/* annulation des marges sur figure */
#slideshow figure {
position:relative;
display:inline-block;
padding:0; margin:0;
}
/* petit effet de vignette sur les images */
#slideshow figure:after {
position: absolute;
display:block;
content: " ";
top:0; left:0;
width: 100%; height: 100%;
box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}


Nous voici sur une mise en forme plus propre, les éléments figure sont placés sur une seule et même ligne et le débordement est caché.

L'ombre sous la photo n'apparait pas, car j'ai un problème de compatibilité entre le fichier css extérieur de ma page et celui que je rajoute sur ma page pour faire la démonstration.

Il ne nous reste plus qu’à présenter un peu mieux notre légende qui est actuellement planquée :


/* styles de nos légendes */
#slideshow figcaption {
position:absolute;
left:0; right:0; bottom: 5px;
padding: 20px;
margin:0;
border-top: 1px solid rgb(225,225,225);
text-align:center;
letter-spacing: 0.05em;
word-spacing: 0.05em;
font-family: Georgia, Times, serif;
background: #fff;
background: rgba(255,255,255,0.7);
color: #555;
text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}




Nous allons maintenant nous occuper de la phase automatique du slideshow.

Pour obtenir une animation cohérente tout le long d’un cycle, vous devez vous poser la question suivante :
"Combien de temps est nécessaire pour la compréhension de chaque slide ?"

Bien entendu, la réponse va dépendre du contenu, mais imaginons que nous ayons 4 étapes, pas beaucoup de texte, 6 secondes peuvent sembler suffisantes pour chaque étape.
Il reste alors à estimer la durée d’une transition d’une étape à l’autre, 2 secondes.
Avec 8 secondes multipliées par 4, ça nous fait 32 secondes d’animation pour boucler un cycle complet.

Commençons par animer le bloc qui contient nos images et légendes en le faisant glisser. Pour cela, créons notre animation :


/* fonction d'animation, n'oubliez pas de prefixer ! */
@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -100% }
50%, 70% { left: -200% }
75%, 95% { left: -300% }
}


N’oubliez pas de préfixer également la règle @keyframes (Il faudra s’embêter à dupliquer le code de l’animation) de la sorte :



/* fonction d'animation, n'oubliez pas de prefixer ! */

@-webkit-keyframes slider {
...
}

@-moz-@keyframes slider {
...
}

@-o-keyframes slider {
...
}

@keyframes slider {
...
}

Chaque étape est exprimée en pourcentage, aussi 50% signifie que nous en sommes à la 16ième seconde de notre animation.
Si plusieurs étapes ont la même valeur d’une propriété, ou si vous souhaitez créer un arrêt, il suffit de mettre la valeur sur la même ligne séparer par une virgule.
Par exemple, sur la première étape, nous avons 0, 20 et 100% qui cohabitent. Cela sous entend que de 0 à 20%, la valeur de left est de 0, nous créons donc un arrêt. Cela signifie aussi que de 95 à 100%, la valeur de left passe de -300% à 0. C’est un moyen facile de retourner à la valeur initiale pour créer une boucle.

Nous avons créer l’animation, il faut maintenant l’attribuer à notre élément de cette manière :


/* complétez le sélecteur : */
#slideshow .slider {
/* ... avec la propriété animation */
animation: slider 32s infinite;
}

Cette syntaxe de la propriété animation est le raccourci de animation-name, animation-duration, animation-iteration-count, dans cet ordre précisément ici.

Ici nous savons que les commentaires doit être à leurs maximum à quatre reprise, avec une apparition et disparition progressive avant chaque changement de slide.

Avec ce procédé, nous allons faire monter et descendre notre légende à chaque slide.


@keyframes figcaptionner {
0%, 25%, 50%, 75%, 100% { bottom: -55px; }
5%, 20%, 30%, 45%, 55%, 70%, 80%, 95% { bottom: 5px; }
}

Pour faire simple, la ligne du haut indique que de 0 à 25% la barre doit être cachée, et sur la ligne du dessous on voit que le texte dois s'afficher entre 5 et 20%, ce qui fait qu'il y a une apparition et disparition progressive étant donné que la valeur d'apparition est légèrement plus élevée et celle de disparition légèrement moins.

Puis nous accrochons cette animation à notre élément :


/* ajouter à l'élément : */
#slideshow figcaption {
/* ... la propriété animation */
animation: figcaptionner 32s infinite;
}

Nous avons désormais un slideshow qui fonctionne en mode automatique.

N’oubliez pas de préfixer également la règle @keyframes (Il faudra s’embêter à dupliquer le code de l’animation) de la sorte :



/* fonction d'animation, n'oubliez pas de prefixer ! */

@-webkit-keyframes xxx {
...
}

@-moz-@keyframes xxx {
...
}

@-o-keyframes xxx {
...
}

@keyframes xxx {
...
}

Pour améliorer ce slidshow, vous pouvez aller sur le site cité en haut de page, personnellement à ce niveau du code, je me retrouve avec un résultat satisfaisant.

Si vous voulez poursuive voici un exemple de ce qui est faisable ICI.









Haut-de-Page