Astuce #16: Créer un diaporama animé en Javascript

Bonjour à tous et bienvenue dans cette nouvelle vidéo où nous allons voir comment créer un diaporama. Le rendu souhaité est le suivant: au chargement de la page, il y a une sorte de rideau qui s'ouvre. Ensuite, un cadre blanc surgit au milieu de la page. Dedans, il y a une séquence d'images qui s'affichent l'une après l'autre. L'affichage d'une nouvelle image se fait progressivement en augmentant son opacité petit à petit. On commence par intégrer les éléments HTML. Il s'agit de la div qui va faire office du rideau. Et là, c'est la div blanche qui va faire office du cadre. Et dedans, c'est la div qui contiendra le diaporama. Maintenant, on va passer au CSS. On commence par styler le rideau. Nous allons appliquer une image du nom de back.jpg. Pour le background-size, vous pouvez personnaliser la valeur que vous souhaitez afin de l'adapter à votre affichage. Moi, je vais choisir ces dimensions. Et pour la largeur, dans un premier temps, ça va être à 0 parce que le rideau va s'ouvrir, alors au début on voit rien. Mais dans un premier temps, on mettra une valeur différente de 0 juste pour identifier l'élément au sein du navigateur, par exemple 20px. Sur la page, on n'a rien. C'est normal parce que la hauteur aussi n'est pas spécifiée. Par défaut, il vaut 0. Mais ça, c'est le rôle du JavaScript. C'est lui qui va appliquer la hauteur appropriée selon les dimensions du navigateur. D'ailleurs, maintenant, on va passer au JavaScript. Rechargement de la page. On appelle une fonction anonyme. On va commencer par récupérer les éléments HTML. Donc là, c'est la variable back qui va représenter l'objet identifié par back. On fait pareil pour les autres objets. Ensuite, on va déclarer une suite de variables dont on aura besoin dans cet exercice. Par exemple, la variable im qu'on va initialiser à 1, qui va représenter la première image dans ce cas. D'ailleurs, les images sont nommées de cette manière, de im1 jusqu'à im5 dans ce cas. Alors la première image s'appelle image1, d'où l'index 1. Une variable opacité qu'on va initialiser à 0 parce que n'oubliez pas que l'image s'affichera progressivement en passant de la transparence totale à l'opacité totale, c'est-à-dire que la valeur de l'opacité dans un premier temps vaut 0. Bon, je mettrai carrément des commentaires afin d'élucider tout ça. J'aurai aussi besoin de quelques variables qui vont agir sur la largeur et la hauteur des différents containers qui vont s'animer. wb signifie width back pour faire allusion à la largeur de la div back. ww c'est width wide qui va faire allusion à la largeur de la div white. Et hw, c'est la hauteur de la div white. La première opération que l'on va faire, c'est adapter la hauteur de la div qui va représenter le rideau. On va adapter sa hauteur au navigateur. La hauteur de l'espace disponible sur navigateur, on peut la récupérer en JavaScript à l'aide de l'attribut window.innerHeight. N'oubliez pas l'unité. En exécutant déjà pour voir si la div a exactement la même hauteur que le navigateur. Voilà, ça marche bien. Puisque maintenant on est sûr que la hauteur de notre div s'adapte au navigateur, alors on va éliminer la largeur. Dans le CSS, on va mettre la valeur 0. Après la préparation des différents objets, on va animer le rideau. Alors on va prévoir une fonction qui s'appelle d_back par exemple pour dire div_back que je vais déclarer juste après. Puisqu'il s'agit d'une animation, alors forcément on aura besoin d'une fonction récursive avec une certaine temporisation. Alors je mettrai ceci. La durée du rappel dans ce cas c'est 10 millisecondes. Bien sûr vous êtes toujours libre à personnaliser les valeurs comme vous souhaitez. Je vais récupérer l'identifiant du temporisateur. Que j'appellerai tdb pour temporisateur div back si vous voulez. L'animation consiste à élargir la div, c'est-à-dire à agir sur son width. Alors tant que la largeur de notre rideau n'atteint pas la largeur de l'écran, on va l'incrémenter. Alors si la variable wb qui représente la largeur de la div est inférieure à la largeur de l'écran, incrémente celle-ci. J'incrémente par exemple de 15. Sinon, alors dans ce cas je cesse l'incrémentation et je vais plutôt fixer la valeur de wb à window.innerWidth. Vous vous demandez probablement pourquoi j'ai appliqué ceci. Bon, parce que la condition est déjà suffisante pour appliquer à la fin wb qui est égal à window.innerWidth. Donc problème, c'est que j'incrémente par 15 alors que la largeur de mon écran n'est pas forcément multiple de 15. C'est-à-dire qu'en général, je peux dépasser de peu la largeur de mon écran. Alors, pour ajuster tout ça, j'arrondis la valeur de cette manière. Et bien sûr, il faut appliquer cette largeur WB à notre élément. Et n'oublie pas l'unité. Donc ça donne ceci. Bien que l'animation semble s'arrêter, mais il faut être conscient que la fonction récursive se rappelle toujours. Il y a juste la condition qui empêche la div de s'agrandir davantage. Alors on va arrêter le temporisateur. Ici, le comportement est toujours le même. Maintenant on va styler la div white qui va faire office du cadre. La couleur bien entendu c'est blanc. On va choisir position absolute afin qu'il soit au-dessus du rideau. Dans un premier temps, on va spécifier la valeur left et top à 0, 0 afin de maintenir notre objet dans le coin haut à gauche. Mais bien sûr, JavaScript viendra pour ajuster tout ça après. Comme vous l'avez vu dans la démonstration, le diaporama est centré dans le cadre. Alors on va ajouter du flex. Voilà, on va tout centrer au milieu. On peut aussi ajouter une petite ombre portée avec box-shadow. On va choisir du noir avec une opacité de 0,8 pour que ce soit plus naturel. On voit pas vraiment la div, c'est normal parce qu'on n'a pas spécifié la largeur et la hauteur puisque c'est positionné. Provisoirement, on mettra par exemple width 100 pixels et height 100 pixels. Donc ça donne ceci, voilà. Bon, maintenant j'élimine ces dimensions parce que c'est JavaScript qui va s'occuper de calculer tout ça. Même le top et le left, on peut éliminer ça si vous voulez. On passe encore au JavaScript. Alors quand le rideau sera totalement ouvert, on appelle une fonction qui s'appelle dans ce cas b_white pour dire div white, que je vais déclarer ici. Comme d'habitude, c'est une fonction récursive parce que ça va donner naissance à une div animée. La durée c'est la même, 10 millisecondes. Et là encore on va appliquer des conditions parce que dans ce cas on aura la div qui va s'élargir sur la largeur et sur la hauteur. Donc on aura besoin des deux variables www et hw. Alors si la largeur est inférieure à une valeur que vous spécifiez, donc moi par exemple je vais appliquer 800 pixels, je vais dire que ça c'est la largeur de mon diaporama. Bien sûr vous pouvez toujours personnaliser cette valeur comme vous le souhaitez. Alors dans ce cas, on incrémente de 10. Sinon, on va faire pareil comme on a fait pour la div du rideau. On fixe à 800. On fait le même traitement pour la hauteur. La hauteur que je vais choisir, c'est 460 pixels. Et bien sûr, on va appliquer la largeur et la hauteur à notre div. Exécutons. Donc ça donne ceci, c'est bien. Mais là encore, la fonction s'exécute toujours bien que l'animation a cessé. Alors on va arrêter le temporisateur. Alors où est-ce qu'on va arrêter? Est-ce que c'est dans la première condition ou bien la deuxième condition? Figurez-vous bien que quand HW atteindra la valeur 460, alors il s'arrête. Par contre, WW continuera à s'incrémenter. Alors on imagine que cet ensemble d'instructions va s'exécuter bien après l'exécution de ce bloc. Alors c'est là on va mettre le clear timeout. Réexécutons. C'est bien. Il reste un truc maintenant, c'est le centrage. Parce que l'idée c'est que le cadre soit centré au milieu de la page. Alors il suffit d'ajuster la valeur de left et de top. Ça veut dire la valeur de ce point. En fait, pour que cet objet soit au centre ici. Bon, on imagine que ça c'est le coin haut à gauche de la div. Alors la valeur du left, ça sera la distance entre le bord gauche du navigateur et le centre de la div moins la moitié de la largeur de la div. Autrement dit, c'est la largeur du navigateur moins la largeur de la div divisée par 2. Ça donnera la position du left. Alors on va appliquer ça en JavaScript. Alors la largeur du navigateur c'est window.innerWidth moins le www qui est la largeur de la div qui est calculée en temps réel divisé par 2 et tout ça, ça va être concaténé à l'unité px. La même chose pour Top. Réexécutons. Voilà, ça donne exactement le rendu souhaité. Maintenant, c'est le tour du diaporama. Alors, on va commencer par styler notre diapo en CSS. C'est la div identifiée par image. On va appliquer déjà une image d'arrière-plan dans un premier temps. On va appliquer img1.jpg. Alors la largeur, ça va être inférieur à 800 pixels qui est la largeur du cadre. Bon, je vais choisir 780 pixels. Et pour la hauteur c'est 440 pixels. Comme ça je laisse une sorte de marge de 10 pixels de chaque côté. On couvre la div avec le maximum de l'image en exécutant déjà. Bon, il y a un petit problème, c'est que l'image est visible depuis le début. Alors on va la masquer. Comme ça. Mais c'est pas tout, on va aussi lui appliquer l'opacité 0 parce qu'on va agir sur celle-ci avec JavaScript. Maintenant, quand la div blanche cessera de s'animer, on appelle la fonction qui s'appelle diapo. Que je vais créer ici. Bien évidemment, c'est une fonction récursive avec un délai de rappel de 10 millisecondes. Remarquez que je n'ai pas récupéré l'identifiant du temporisateur parce que cette animation, bien, le diaporama va s'exécuter tant que le navigateur est ouvert. Alors, la première chose à faire, c'est qu'on va afficher l'image parce que jusqu'ici avec le CSS, on a masqué carrément. Avec display none. Alors on va changer ça. Vous mettez inline ou bien block comme vous souhaitez parce que l'image par défaut c'est inline, mais si vous mettez block ça change rien. Maintenant on va incrémenter la valeur de op. On incrémente avec une petite valeur, 0,01, parce que normalement l'opacité c'est comprise entre 0 et 1. Ensuite, on applique l'opacité à l'image. Alors, exécutons. Alors, c'est bon pour la première image. Maintenant, il suffit de faire tourner le diaporama. Alors, à chaque fois qu'on atteint le maximum de l'opacité, on change l'image. Donc le maximum d'opacité qui est reconnu par CSS, c'est 1. Alors on va incrémenter im de 1. Je vous rappelle que im, c'est l'index numérique qui me permet d'identifier l'image. Là, bien sûr, il faut faire attention à ne pas dépasser la valeur 5 parce que je n'ai que 5 images en tout. Alors si im dépasse la valeur 5, je la ramène à 1. Comme ça, le diaporama va se réexécuter. Et puis je change la source de l'image. Faites bien attention à la concaténation et n'oublions pas d'initialiser la valeur de hop à 0 aussi. Pour rendre l'image transparente. L'image ne change pas, c'est normal parce qu'ici je devrais mettre supérieur, supérieur à 1. On exécute. Je crois que c'est bon. Mais vous constatez que l'image change trop rapidement, c'est-à-dire que l'utilisateur n'a pas le temps de voir les détails de l'image. Alors on va régler ça avec une petite astuce. On sait que la valeur d'opacité maximale reconnue en CSS, c'est 1. Mais imaginez que vous avez mis la valeur 2. Dans ce cas, le navigateur, quand il va voir une valeur qui est supérieure à 1 pour l'opacité, alors lui il va s'arrêter à 1. Et pourtant notre condition ne sera vraie que si op est supérieure à 2. C'est à ce moment-là qu'on va passer à une autre image. Ça va nous laisser un peu de temps pour admirer les détails de l'image. Exécute encore. Je crois que c'est mieux. Et si vous voulez prolonger encore la durée d'affichage de l'image, il suffit d'augmenter la valeur au sein de la condition. Vous mettez par exemple 3 ou bien carrément une valeur décimale, 3,5 si vous voulez. Et si l'arrière-plan ne vous plaît pas, alors on peut lui appliquer juste une simple couleur noire comme ceci. Avec du CSS. C'est du noir un peu transparent. On va masquer cette ligne avec un commentaire. Exécutons. Et voilà, donc là c'est plus simple. J'espère que cette vidéo vous a plu. Merci pour votre attention et à la vidéo prochaine.