Voyons dans ce tuto sur Oxygen Builder pour WordPress comment dans une page unique, créer des déplacements verticaux et horizontaux doux et progressifs à l'aide de 3 exercices pratiques.
Concevons une structure de page WordPress de manière à insérer des blocs HTML pleine largeur et pleine hauteur basés sur les même largeurs et hauteur du Viewport (100%).
- Utilisons dans un premier exemple l'extension "Page Scroll to ID" et des ancres HTML pour créer cet effet. La structure sera composée de deux colonnes: celle de gauche reste fixe et contient les éléments de navigation. La deuxième à droite permettra de se déplacer verticalement.
- Dans un deuxième exemple le script Jquery Mousewheel.js, intégré facilement avec l'extension Wordpress "My Custom Functionnality". Finalisons la mise en forme en insérant en arrière-plan de chaque bloc une image fixe et texte animé en CSS.
- Le troisième cas pratique intègre le même système de navigation mais en y faisant apparaître dynamiquement des articles Wordpress à l'aide d'un bloc "Repeater" d'Oxygen
Bon tuto !