Dans cette vidéo tutorielle en français, le présentateur montre comment créer une navigation en slides à deux dimensions sur une page web unique. Il décrit d’abord le principe général : placer tout le contenu (six sections organisées en 2 lignes × 3 colonnes) dans un conteneur qui dépasse la taille de l’écran, puis n’afficher qu’une partie à la fois via des déplacements du conteneur. Il détaille la mise en place du HTML (une div #container contenant six sections avec des IDs distincts), le CSS (largeur du conteneur = 300 vw, hauteur = 200 vh, display :flex avec flex‑wrap, position :absolute, z‑index, images d’arrière‑plan en 100 % de la section, overflow :hidden sur le body, menu de navigation fixe avec styles de lien et pseudo‑classe hover). Ensuite il explique le JavaScript : une fonction f(x, y) qui, selon les coordonnées de la slide cible, ajuste les propriétés left et top du conteneur en multiples négatifs de 100 vw et 100 vh, ajoute une transition CSS pour l’animation, et est appelée via des liens « javascript:f(x,y) ». Le présentateur mentionne également les limites de performance (chargement initial lourd) et propose d’utiliser AJAX/Fetch pour charger les sections à la demande. Enfin il résume les usages possibles (navigation de page, album photo) et conclut avec un ton encourageant.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle astuce de développement web. Aujourd'hui, nous allons voir comment créer un système de navigation en slides à 2 dimensions. Bien entendu, on pourrait envisager ce système aussi pour créer des albums photos. Le principe repose sur le fait d'intégrer tout le contenu sur une seule et unique page web, mais seulement une partie de celle-ci sera visible. Et on peut explorer les autres parties en se servant des menus de navigation. Il serait utile de mentionner qu'une telle page web mettra un temps important au chargement vu que tout le contenu doit être importé du serveur. Il serait donc utile d'envisager l'utilisation d'AJAX ou API Fetch pour charger le contenu à la demande tout en permettant la navigation en slides à 2 dimensions. On commence par intégrer le contenu HTML. Dans une div que l'on identifiera avec container. Dedans, on mettra 6 sections. On va juste copier cette ligne plusieurs fois. On change dans les ID. Maintenant on va se rendre sur le CSS afin d'appliquer le style à ce contenu. Puisqu'on a 6 sections, donc moi je vais opter pour les disposer de cette manière: 2 lignes et 3 colonnes. Alors le container principal qui va abriter ces sections aura une largeur de 3 fois la largeur de l'écran et une hauteur de 2 fois la hauteur de l'écran. Je vais utiliser l'unité viewport-width. Je vais utiliser display flex parce que par défaut les sections sont des blocs, donc je vais disposer en ligne. Mais je voudrais quand même assurer un retour à la ligne afin de mettre 3 sections par rangée. Donc je mettrai flex-wrap avec la valeur wrap afin de forcer un retour à la ligne. Bon, je vais opter pour une position absolue avec z-index égal à 1 parce qu'après je vais intégrer le menu qui va être au-dessus de ce container et il aura par conséquent un z-index plus important. Maintenant pour les sections, chacune d'entre elles aura exactement les dimensions de l'écran. Ensuite, je vais intégrer des images d'arrière-plan et je voudrais que ces images occupent la totalité de la section avec un alignement centré par défaut. Maintenant, je vais appliquer des images d'arrière-plan aux différentes sections qui sont identifiées respectivement par S1, S2 jusqu'à S6. J'ai déjà prévu des images qui s'appellent im1, im2, etc. Donc là, il suffit de changer l'indice numérique. Exécutons déjà pour voir le résultat sur le navigateur. Donc ça donne ceci, première image. Deuxième image, troisième image, c'est bien. Donc on a 3 colonnes et 2 lignes. Quatrième image, cinquième image et sixième image, c'est bien. Afin de faire disparaître le scrollbar, je vais juste ajouter ce style sur le body. Je mettrai overflow hidden. Donc désormais, j'ai plus de moyens d'explorer la page et c'est justement le rôle des liens que je vais intégrer. Je les intègre ici par exemple. Là, c'est le container qui contiendra les liens. Par exemple, je mettrai page 1, page 2, 3, 4, 5 et 6. Avec le CSS maintenant. Donc le container principal qui renferme les liens, je veux qu'il soit positionné en fixed. Pour qu'ils changent pas de position même s'il y a l'arrière-plan qui défile. Là c'est le système de coordonnées que l'on applique sur le container. Et pour z-index je mettrai une valeur qui est supérieure à celle du container précédent pour que les liens soient positionnés au-dessus. Donc voilà ce que j'ai, les liens sont maintenant intégrés de cette manière. Donc là, pour les 2 images qui apparaissent en même temps, c'est juste le navigateur qui a mémorisé la dernière position comme ceci, mais ça va s'arranger par la suite. Maintenant, c'est au tour des liens. Je leur applique une bordure blanche. Je fixe aussi la largeur. Une marge interne. Je retire le souligné qui marque par défaut les liens hypertextes. J'applique un petit arrondi de la bordure. Regardons ce que ça donne. C'est bien. Je vais aussi appliquer des marges et une petite couleur d'arrière-plan. C'est du blanc un peu transparent. Ça donne ceci. Je crois que je mettrais plutôt du noir. Oui, je crois que c'est mieux comme ça. Bon, je vais appliquer une pseudo-classe au cas où les liens sont survolés. Donc là, je vais inverser les couleurs, je mettrai du blanc. Donc ça va donner ça, c'est bien. Alors je crois que côté CSS, on a fini. Maintenant, c'est au tour du JavaScript. L'idée c'est simple, une fois que je clique sur le premier lien, c'est la première image qui sera visible. Je clique sur le deuxième lien, dans ce cas c'est l'image qui est juste à côté qui va être visible. Et bien sûr ça va créer un petit effet d'animation. Alors vous avez deviné que je vais jouer sur les propriétés left et top du container principal. Tout d'abord pour appeler le JavaScript, je vais le faire ici. En guise de valeur de l'attribut href, je mets javascript pour dire qu'une fois que je clique sur le lien, c'est un code JavaScript qui sera exécuté. J'appelle une fonction qui s'appelle f, à laquelle je vais passer 2 arguments. Là par exemple, c'est la position x et la position y de l'image. Pour la première image, c'est 0, 0. La deuxième image, c'est 1, 0, pour dire la deuxième colonne, première ligne. Troisième colonne, première ligne. Pour la quatrième image, c'est deuxième ligne, première colonne, deuxième ligne, deuxième colonne, puis deuxième ligne, troisième colonne. Maintenant, je déclare ma fonction f ici. Avec les arguments x et y. Maintenant je vais jouer sur la position des containers. Alors pour le left, ça va forcément être une valeur négative parce que je voudrais décaler mon image dans ce cas vers la gauche. Donc c'est moins x, x n'est rien d'autre que l'argument que j'ai passé, multiplié par la valeur 100vh. Dans ce cas, si x est égal à 0, alors le left est égal à 0. Si x est égal à 1, dans ce cas le left est égal à moins 100vw, c'est-à-dire viewport width. Et si x est égal à 2, dans ce cas le left est égal à moins 200vw. Tout ça, c'est juste pour faire correspondre l'image souhaitée au viewport, ou bien la partie visible du navigateur. Et n'oublions pas l'unité VW. Je fais pareil pour le Y, ou bien le top. Dans ce cas, ça sera Y, et là c'est l'unité VH, viewport height. Exécutons. Deuxième image, troisième image, quatrième image, cinquième image et sixième image. Donc ça marche. Et bien sûr, pour voir l'effet du slide, je vais juste appliquer des transitions, toujours avec du JavaScript. Voilà, ce sont les valeurs conventionnelles de la transition. Réexécutons. Donc deuxième image, troisième image, quatrième image, cinquième image et sixième image. Comme je l'ai dit au début de cette vidéo, ce système peut servir de système de navigation au sein d'une page web, c'est-à-dire que vous pouvez prévoir carrément du contenu à mettre, des textes, des images, c'est-à-dire comme une page web classique, ou carrément un album photo dans les images des fils comme étant des slides. J'espère que cette astuce vous a plu. Merci pour votre attention et à la vidéo prochaine.
