Short video - Navigation en slide (one single page) CSS et Javascript #html #css #cssanimation

16 Apr 2026 · 1 min

Watch on YouTube

1:15

Dans cette courte vidéo, le présentateur explique comment créer un système de navigation en slides à deux dimensions sur une page web unique. Il décrit le principe de charger tout le contenu dans une seule page, mais d’afficher uniquement une partie visible à la fois, permettant de naviguer entre les sections via un menu. Le flux de travail commence par la création d’une structure HTML : une div « container » contenant six sections, chacune identifiée par un ID distinct. Ensuite, il passe à la mise en forme CSS nécessaire pour positionner les slides et gérer la transition en deux dimensions. Enfin, il souligne les problèmes de performance liés au chargement complet de la page et recommande d’utiliser AJAX ou l’API Fetch pour charger dynamiquement le contenu afin d’alléger le temps de chargement initial. Le ton est pédagogique et enthousiaste, visant les développeurs front‑end souhaitant implémenter des interfaces de type galerie ou album photo avec navigation fluide.

Chapters

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 d'un menu 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 en li ID. Maintenant on va se rendre sur le CSS afin d'appliquer le style à ce contenu.