Short video - Diaporama animé en Javascript

18 Sept 2022 · 1 min

Watch on YouTube

0:39

In this short French tutorial, the speaker explains that CSS opacity values are capped at 1, so any value above 1 is treated as fully opaque by the browser. However, in a JavaScript slideshow the code may use a condition that checks if the opacity variable (op) exceeds a higher threshold (e.g., 2, 3, or 3.5). When the condition becomes true, the script switches to the next image. By setting the threshold higher than 1, the developer can deliberately delay the image change, allowing viewers more time to admire details. The speaker demonstrates that increasing the threshold value further (to 3 or a decimal like 3.5) prolongs the display duration even more.

Chapters

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, navigateur, quand il va avoir 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érieur à 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.