Astuces pratiques de développement Web

Auteur: Mohamed CHINY Durée necessaire pour le cours de Astuces pratiques de développement Web Niveau recommandé pour le cours de Astuces pratiques de développement Web Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz non disponibles pour ce cours

Page 14: Navigation en slide 2D avec CSS et Javascript

Toutes les pages

Navigation en slide 2D animés

Navigation sur une seule page

L'idée de cette astuce consiste à charger tout le contenu du site sur une seule et unique page. Les données à afficher seront ensuite contrôlées avec Javascript qui permet de défiler les containers jusqu'à atteindre celui qui contient les données souhaitées. Cette technique est valable aussi pour créer les albums photo.

Le principe repose sur la création de plusieurs containers qui mesurent exactement les mêmes dimensions que la zone d'affichage du navigateur (viewport). Seul un container est visible à la fois. Une fois l'utilisateur clique sur un lien (dans le menu de navigation) les containers défilent jusqu'à attendre celui qui renferme le contenu voulu. Le ciblage du container est assuré en Javascript et le reste est tout simplement du HTML et du CSS.
Notez que le fait de charger tout le contenu d'un seul coup peut congestionner la bande passante de l'utilisateur vu le volume important de données à recevoir. Il serait donc utile de songer à l'utilisation d'AJAX ou l'API Fetch afin de charger le contenu à la demande tout en gardant l'effet de la navigation en slide.

Passons à la pratique