La technique qui utilise le défilement (scroll) d’une page web à des fins créatives est souvent appelée « scrolling parallaxe » ou « effet parallaxe au défilement ». Cette technique implique de déplacer différents éléments de la page web à des vitesses différentes lors du défilement, créant ainsi une impression de profondeur et de mouvement. Elle est fréquemment utilisée pour améliorer l’expérience utilisateur et rendre la navigation plus interactive et visuellement attrayante.
Ici, le scrolling parallaxe, dans sa version la plus simple peut être utilisé pour conter des récits visuels : L’utilisation du défilement pour raconter une histoire ou présenter des informations de manière séquentielle et engageante.
Les concepteurs UI/UX utilisent ces techniques pour améliorer l’engagement des utilisateurs et créer des expériences web mémorables. Cela demande une bonne compréhension de la conception graphique, du développement front-end, et des principes d’interaction utilisateur pour être efficacement mise en œuvre.
Préparer les écrans pour défilement
See the Pen Scroll CSS by Jerome Mercier (@jmercier) on CodePen.0
Le code commenté par l’IA
HTML : Corps : Le body contient six div avec la classe screen, chacun contenant du texte (« Screen 1 » à « Screen 6 »)…
CSS
- Reset global : La règle
* {margin:0; padding:0;}réinitialise les marges et les remplissages pour tous les éléments, assurant une uniformité sur différents navigateurs. - Style du corps : Le
bodyest stylisé avec une police spécifique, une taille de police, et une largeur de 100%. Il utilise égalementdisplay: flex;etflex-direction: column;pour aligner ses enfants (les divs.screen) en colonne. - Style des écrans : Chaque
.screenest configuré pour s’afficher en flex, occuper 100% de la largeur et toute la hauteur de la fenêtre (100vh). Ils sont centrés horizontalement et verticalement avecjustify-content: center;etalign-items: center;. Le texte est en gras. - Couleurs en alternance : Les règles
nth-of-typesont utilisées pour appliquer des couleurs de fond et de texte différentes aux écrans impairs et pairs. Les écrans impairs ont un fond couleur#dda15eet un texte#fefae0, tandis que les écrans pairs ont des couleurs inversées.
Ce code crée une page web où chaque div.screen s’étend sur toute la hauteur de l’écran, avec un fond et une couleur de texte qui alternent entre chaque section. Cela pourrait être utilisé pour une mise en page de type « page défilante » où chaque écran représente une section différente du contenu.