Dans cette vidéo tutorielle en français, l’auteur guide pas à pas la création d’un album photo tournant avec un effet de reflet miroir. Il commence par structurer le HTML avec un conteneur principal, une div pour la photo et une autre pour le reflet, toutes munies de la classe « img ». Ensuite, il détaille le CSS : remise à zéro du body, centrage du conteneur via flexbox, dimensions de l’image, utilisation de background‑size : cover, ajout d’une bordure blanche entre la photo et le reflet, création du reflet en appliquant rotateX(180deg) et une opacité réduite, puis superposition d’un dégradé linéaire du blanc opaque au transparent pour adoucir le bas du reflet. Enfin, il implémente le JavaScript : initialise un index d’image (i) et un angle de rotation, utilise setInterval (≈20 ms) pour appliquer à l’élément conteneur un transform : perspective(1000px) rotateY(angle) et incrémente l’angle, remet l’angle à zéro après 360°, et change les sources des deux images lorsque l’angle atteint 90° ou 270°, en bouclant l’index de 1 à 5. Le résultat est un album qui tourne en 3D, avec le reflet synchronisé et les images qui se remplacent au bon moment.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle vidéo où nous allons voir comment créer un album photo tournant. Comme vous le voyez, on appliquera aussi une sorte de reflet de l'image active pour améliorer l'effet visuel. On commence par intégrer le container principal. Dedans, on va intégrer une autre div identifiée par photo par exemple. On va aussi lui attribuer une classe du nom de img. Ensuite, on va intégrer une autre div qui fera office du reflet. Avec la même classe img. Maintenant on va se rendre dans le CSS et on commence par la balise body. On va commencer par éliminer les marges, on applique une hauteur fixe de 100vh et on va masquer tout débordement éventuel. Avec overflow hidden. Et pour centrer l'album au milieu de la page, on va appliquer les flexbox avec les propriétés justify-content et align-items avec les valeurs center. Maintenant, la classe img, on va spécifier la largeur et la hauteur de l'image. Par exemple, on va dire 480 pixels pour la largeur et 280 pixels à peu près pour la hauteur si vous voulez. Bien sûr, vous pouvez toujours personnaliser ces dimensions selon vos besoins. Dans un premier temps, on va appliquer une image d'arrière-plan pour voir à quoi il va ressembler. Exécutons déjà pour voir ce qu'on obtient jusqu'ici. Alors on a ça, donc là c'est l'image et là c'est censé être le reflet de l'image. Bien sûr, puisque les deux objets ont la même classe img, donc forcément ils se sont attribués le même style CSS. Mettra background-size cover afin que l'image d'arrière-plan puisse s'étaler sur l'espace maximal possible. Donc c'est ça. On va aussi centrer l'image au milieu du container. Voilà, exécutons. Donc ça c'est le rendu. On va appliquer une petite bordure ici, un petit blanc afin de séparer les deux images. Donc on va prendre le container photo, c'est-à-dire celui qui contient l'image principale. On mettra border-bottom avec la couleur blanche. Donc on a une sorte de séparation entre les deux. Maintenant on va styliser le reflet. L'idée c'est que le reflet soit à l'envers. Alors il faut que l'image qui est là soit symétrique à l'image qui est au-dessus. Alors c'est simple, on va juste appliquer la transformation Rotate par rapport à l'axe X et on mettra 180 degrés. Regardons. Donc là on a comme l'effet miroir, c'est une image qui est symétrique à celle qui est au-dessus. On va appliquer une petite opacité quand même parce que le reflet généralement c'est moins visible que l'image originale. On va mettre opacity, par exemple 0,5. Voilà, comme ça c'est mieux. On veut aussi que le reflet ne soit pas régulier, ça veut dire avec la même opacité partout. On veut que cette partie soit presque transparente, ça veut dire on veut que la partie inférieure de l'image soit presque fusionnée avec l'arrière-plan. Alors il faut que ce soit un peu proche du blanc. Donc on va appliquer un dégradé et pour faire ceci on va intégrer un autre container en HTML. Dans la balise qui fait office du reflet, on mettra une autre div. Et dans le CSS, on va styler cette div comme ça. Alors la largeur et la hauteur seront les mêmes, on va juste copier ces propriétés. Puis on va appliquer un dégradé. Avec linear gradient. On mettra to bottom pour dire vers le bas. Et pour les couleurs, je préfère mettre le RGB. Alors la couleur supérieure sera du blanc parfait et la couleur du bas sera du transparent. C'est toujours du blanc mais transparent. Voilà, exécutons. Donc ça donne ceci. Il faut pas oublier que l'image est à l'envers. Donc ce qui est supérieur dans ce cas, c'est cette partie. Donc là, on a appliqué le blanc opaque et là, c'est le blanc transparent. Alors je crois que c'est bon avec le CSS. Maintenant, on va passer au JavaScript. Comme d'habitude, on va opter pour l'intégration du JavaScript juste avant la fermeture de la balise body. Rechargement de la page. On appelle une fonction anonyme et là on va initialiser certaines variables. Par exemple, le i égal à 1. Donc i dans ce cas fera office de l'index de l'image. Bon, pour les images, ils sont ici. Donc im1, im2, etc. Donc le préfixe est le même, il y a juste un indice numérique qui change d'une image à une autre. On a de 1 à 5. Alors le i qui est là fera office de cet index numérique. On va aussi initialiser la variable angle à 0. Bon, c'est l'angle de rotation parce que comme vous l'avez vu, l'image va tourner. Puis on va appeler la fonction qui va carrément assurer cette rotation. Donc la fonction c'est par exemple album. Comme on a l'habitude de faire, généralement une fonction pareille est une fonction récursive qui va se rappeler au bout d'un certain moment. Mais dans ce cas, on va assurer la récursivité avec la méthode setInterval. Comme ça. Et la durée de rappel, on mettra par exemple 20 millisecondes. La structure de cette fonction, c'est presque la même que la méthode setTimeout. Et là, on va déclarer la fonction album. Alors, ce qu'on va faire tourner, c'est la photo et son reflet. Et pour ne pas les traiter de manière individuelle, on va plutôt faire pivoter le container qui est le parent de ces deux objets. Alors on mettra document.getElementById container et on va appliquer la propriété transform. Pour cette propriété on va mettre les perspectives. Avec une valeur référentielle, par exemple mettre à 1000 pixels. Et la valeur la plus importante, c'est la rotation par rapport à l'axe des Y dans ce cas. Rotate Y. La valeur appliquée, c'est la variable angle, et n'oubliez pas l'unité en degrés. N'oubliez pas la concaténation parce que angle, c'est une variable dans ce cas. Puis on va incrémenter angle, angle++ si vous voulez. On exécute. Donc la rotation est bel et bien opérationnelle. Angle bien sûr va s'incrémenter de manière indéfinie, c'est-à-dire ça peut même dépasser 360°. Comme vous le savez, donc les angles sont périodiques, ça veut dire au-delà de 360° c'est comme si on refait le tour, mais il est préférable quand même de limiter l'intervalle de changement de la variable angle. Alors on va mettre une condition. If ang est supérieur ou égal à 360, alors on va la ramener à 0. Puis autre chose, à chaque fois que l'image est perpendiculaire à l'écran, alors l'image va changer. Donc on mettra une condition. Si la valeur de ang est égale à 90 degrés, c'est-à-dire perpendiculaire à l'écran, ou bien 270° qui est aussi une position perpendiculaire à l'écran. Dans ce cas, on va changer l'image, donc on va incrémenter i de 1. i++ ou bien i+= 1 si vous voulez. Et là encore, il faut vérifier à ne pas dépasser l'intervalle des images parce que comme je vous l'ai montré, les images vont de 1 jusqu'à 5. Donc si i dépasse 5, alors il faut la ramener à la valeur 1. Et là, il suffit de changer la source de l'image des 2 containers, c'est-à-dire photo et reflet. Il faut bien faire attention à la concaténation pour ne pas commettre d'erreurs de syntaxe. Maintenant, exécutons pour voir si l'image change bien dans le premier container qui est photo. C'est bon, c'est OK. Maintenant, il suffit de copier cette ligne et Et là on mettra reflet parce que les deux images changent simultanément, l'image principale et son reflet. Et voilà, donc je crois que c'est bon. Alors j'espère que vous avez apprécié cet exemple. Merci pour votre attention et à la vidéo prochaine.
