Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

CREER UN DIAPORAMA EN HTML ET EN CSS

Présentation de l’exercice

Dans ce nouvel exercice, nous allons essayer de créer un diaporama en n'utilisant que les deux langages HTML et CSS.

Il ne va pas nous être possible de créer un "vrai" diaporama à proprement parler, c'est-à-dire un diaporama pouvant charger dynamiquement les images et possédant des boutons pour passer d'une image à l'autre mais nous allons pouvoir réaliser quelque chose qui va s'en approcher.

Pour faire cela, nous allons utiliser la propriété CSS animation de façon judicieuse.

Nous allons présenter ici deux utilisations différentes de la propriété animation qui vont résulter en deux diaporamas au fonctionnement différent.

Création d'un diaporama en HTML et en CSS avec passage des images en fondu

Nous allons déjà créer un diaporama avec des images qui vont s'enchainer avec un effet de fondu.

Pour cela, nous allons commencer par créer une page HTML toute simple qui va simplement contenir un élément div qui va nous servir de conteneur pour notre diaporama.

Création d'un div pour contenir notre diaporama en HTML et en CSS

Nous allons ensuite créer un fichier CSS que j'ai appelé diaporama.css et l'enregistrer dans le même dossier. Pensez bien à lier votre fichier CSS avec votre fichier HTML.

Dans ce fichier CSS, nous allons commencer par effectuer un reset des marges de notre élément body et allons également fixer sa taille à 100% de notre page.

Reset marges élément body diaporama

Ensuite, nous allons centrer notre div dans notre page grâce à la propriété margin, et lui appliquer une largeur et une hauteur fixes (960px par 500px).

Nous allons également ajouter une bordure à notre div afin de créer un cadre autour de notre diaporama ainsi qu'une image de fond.

Pour notre premier diaporama, je vais utiliser trois images que j'ai appelé image1.jpg, image2.jpg et imga3.jpg et que j'ai placé dans un sous dossier nommé imgs.

Ces trois images font toutes exactement la taille de mon div, c'est-à-dire 960px de large par 500px de hauteur.

Par défaut, je vais utiliser mon image image1.jpg en fond de mon élément div.

Styles CSS de notre div

Nous allons ensuite finalement pouvoir créer notre diaporama en utilisant la propriété CSS animation ainsi que la règle CSS @keyframes.

Comme cette propriété et cette règle ne sont pas encore parfaitement supportées par tous les navigateurs, nous utiliseront les préfixes vendeurs -webkit- et -moz- ainsi que la notation long hand de animation pour maximiser la compatibilité.

Nous allons donc commencer par donner un nom à notre animation avec la propriété animation-name, puis nous allons définir la durée totale de l'animation avec animation-duration.

Ensuite, nous allons préciser la courbe de vitesse de notre animation avec la propriété animation-timing-function, ainsi que le nombre de répétitions de l'animation avec animation-iteration-count.

Finalement, nous allons définir la direction de notre animation avec animation-direction.

On utilise les propriétés CSS animation pour créer un premier diaporama en HTML et CSS

Ici, nous donnons donc la valeur inifinite à la propriété animation-iteration-count afin que notre animation se répète indéfiniment. Cela va nous permettre de mimer le comportement d'un diaporama

Pensez bien à préciser les différentes propriétés animation dans le même ordre que moi ainsi que la version non préfixée de la propriété après les versions préfixées afin que tout fonctionne bien.

Finalement, nous allons utiliser la règle CSS @keyframes pour préciser la propriété qui doit être animée ainsi que les valeurs qu'elle doit prendr durant l'animation.

Nous allons ici vouloir animer l'image de fond de notre div et lui passer nos différentes images en valeur durant la durée de l'animation.

Nous allons donc utiliser des valeurs en pourcentage dans notre keyframes également espacées afin que nos images se fondent régulièrement les unes dans les autres.

Voici donc le code que je vous propose :

On utilise la règle CSS @keyframes pour créer un premier diaporama en HTML et CSS

En résultat, nous observons que l'image de fond de notre div change constamment et avons donc réussi à reproduire le comportement d'un diaporama uniquement en HTML et en CSS comme on peut le voir ci-dessous :

Création d'un diaporama en HTML et en CSS avec défilement des images

Nous allons également pouvoir créer un deuxième "diaporama" avec cette fois-ci des images qui vont défiler en utilisant toujours la propriété CSS animation.

Pour cela, nous allons commencer par créer un deuxième div dans notre page HTML :

Création d'un deuxième div pour contenir une deuxième version de notre diaporama

Cette fois-ci, nous n'allons utiliser qu'une seule image de fond qui va contenir nos trois images précédentes. Cette image fait donc 3*960px de large.

L'idée ici va être de n'afficher qu'un bout de l'image à chaque fois et d'utiliser la propriété CSS background-position pour faire bouger cette image au sein d'une animation.

Commençons donc déjà par définir la largeur, hauteur, bordure et image de fond de notre div comme précédemment.

Mise en forme du div qui va contenir notre diaporama

Ensuite, nous utilisons les propriétés animation de façon analogue.

Utilisation de la propriété CSS animation pour créer un diaporama

Dans notre keyframes, nous allons modifier la position de notre image de fond dans le temps.

Nous allons pouvoir ajouter des temps de "stop" ici en précisant une même position pour notre image de fond à différents moments de notre animation. Voici le code que je vous propose pour faire cela :

Utilisatoin du keyframes pour modifier la position du background et créer un diaporama en HTML et CSS

Comme vous pouvez le voir, je définis des temps de stop dans notre animation pour chaque "sous image" de mon image. Par exemple, entre 31 et 35% de notre animation, notre image va arrêter de défiler.

Vous pouvez voir le résultat ci-dessous :

Conclusion de l'exercice de création de diaporama en HTML et CSS

Une nouvelle fois, nous avons pu démontrer les possibilités du couple HTML / CSS qui nous ont ici permis de recréer le fonctionnement d'un véritable diaporama, sans utiliser une seule ligne de JavaScript.

J'espère que vous retindrez de nombreuses choses de cette nouvelle démonstration.