Astuces ⇒ HTML CSS facebook twitter youtube

Créer un slideshow automatique css3 | Créer un slideshow automatique css3


Je voulais vous présenter une méthode pour créer un diaporama en utilisant uniquement des technologies HTML5 et CSS3.
Aujourd'hui, la mise en œuvre des animations (images clés) rend facile à jouer en boucle nombreux éléments simultanément. Bien sûr, certains navigateurs doivent encore évoluer pour intégrer ces animations, mais il est globalement sur la bonne voie!
Cette démonstration de CSS3 utilise ces images clés combinés avec la propriété de transition.

 

Voici du code HTML

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).

.

Je n’ai mis aucun élément de commande pour le moment, nous verrons cela plus tard

<div class="container">
            <div class="c_slider"></div>
            <div class="slider">
                <figure>
                    <img src="img/slider-1.jpg" alt="7astuces" width="640" height="310" />
                    <figcaption>Titre 1</figcaption>
                </figure><!--
                --><figure>
                    <img src="img/slider-2.jpg" alt="7astuces" width="640" height="310" />
                    <figcaption>Titre 2</figcaption>
                </figure><!--
                --><figure>
                    <img src="img/slider-3.jpg" alt="7astuces" width="640" height="310" />
                    <figcaption>Titre <em>3</em> </figcaption>
                </figure><!--
                --><figure>
                    <img src="img/slider-4.jpg" alt="7astuces" width="640" height="310" />
                    <figcaption>Titre 4</figcaption>
                </figure>
            </div>
        </div>
 

Le code CSS

Voici le  CSS  principalement à positionner, dimensionner et décorer les différents blocs,

 

#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 */
#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 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshow:before {
	left:0;
	transform: rotate(-4deg);
}
#slideshow:after {
	right:0;
	transform: rotate(4deg);
}
 

Résultat1

slider

 

Suite css

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;
}
 

Résultat2

slider

 

 

Etap3

 

Les éléments figure sont placés sur une seule et même ligne et le débordement est caché.
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);
}
 

slider

 

Animer notre contenu

 

Animer phase

Cette phase va être quelque peu répétitive puisque nous allons devoir créer un certain nombre d’animations grâce à la fonction CSS @keyframes. Pour en savoir plus sur les animations, je vous invite à lire la partie « animation » de cet article sur le timing .

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 ou 7 secondes peuvent sembler suffisantes pour chaque étape. Il reste alors à estimer la durée d’une transition d’une étape à l’autre, 1 ou 2 secondes. Avec 8 secondes multipliées par 4, ça nous fait 32 secondes d’animation pour boucler un cycle complet.

Animation du conteneur

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

 

 

 





>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces