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.

Passons à la pratique