En rompant occasionnellement (et judicieusement) avec les attentes des utilisateurs, vous pouvez attirer une attention supplémentaire sur des zones particulières de votre site et créer une expérience délicieusement immersive, un peu en dehors de la norme. Les sections de défilement horizontal intentionnelles offrent un outil puissant pour cette tactique UX.
Et puisque tant d'entre vous nous ont demandé comment nous avons créé la section à défilement horizontal sur la page d'annonce d'Interactions 2.0, nous avons pensé vous montrer comment le faire vous-même.
Avant de plonger dedans, jetez un œil à la démo de défilement horizontal. Ou clonez le site pour l'explorer et le reconstituer !
Étape 1 : Ajoutez et stylisez les divs wrapper
Pour garantir que notre section à défilement horizontal ait le plus grand impact, nous l'avons placée au milieu de notre page de démo. Si vous suivez, assurez-vous de faire la même chose.
Pour commencer, ajoutez un div au canevas et donnez-lui la classe « Gallery ». Puis ajoutez les styles suivants :
- Margin top : 50px (haut et bas)
- Width : 100%
- Height : 4000px
- Position : Relative
Pour créer le dégradé d'arrière-plan pour la section, ajoutez ce qui suit dans la section Background :
- Type : Linear
- Angle : 45°
- Color stop 1 : #662d8c
- Color stop 2 : #ed1e79
Ajoutez ensuite un autre div à l'intérieur du div « Gallery » que vous venez de créer, et appelez-le « Gallery Scroll Track ».
Définissez la position sur Absolute, Full. Changez le Z-index à 1.
Ajoutez encore un autre div à l'intérieur du div « Gallery Scroll Track » et donnez-lui la classe « Gallery Container » avec ces paramètres :
- Width : 100%
- Height : 100vh
- Overflow : Hidden
- Position : Relative, top, 0px
Ajoutez un autre div à l'intérieur du div « Gallery Scroll Track » appelé « Gallery Track » et ajoutez ces paramètres :
- Display settings : Flex
- Flex Layout : Horizontal, justify left, align center
- Width : 300vw
- Height : 100%
- Position : Relative
Étape 2 : Ajoutez votre contenu
À ce stade, votre panneau Navigator devrait ressembler à ceci :
Dans les étapes suivantes, nous allons ajouter nos images au div « Gallery Track ». J'ai choisi de les ajouter via des divs avec des images d'arrière-plan pour garder les choses simples, mais vous pourriez afficher tout, des photos de membres de l'équipe aux citations de clients, et même extraire votre contenu du CMS.
Ajoutez donc un div au « Gallery Track » et donnez-lui la classe « Gallery Image » avec les paramètres suivants :
- Flex item : Expand
- Margin : 20px (tous les côtés)
- Height : 70vh
- Border radius : 5px
Pour aider les images à se démarquer, vous pouvez aussi ajouter une ombre portée avec ces paramètres :
- Color : rgba (0, 0, 0, 0.25)
- Angle : 135°
- Distance : 1px
- Blur : 19px
- Size : 0px
Vous aurez maintenant un bloc div qui s'étend sur toute la largeur du conteneur Gallery, mais il n'a pas d'image d'arrière-plan. Étant donné que je ne construis pas ceci avec du contenu dynamique extrait du CMS, j'ajouterai une classe combo supplémentaire à chaque bloc div « Gallery Image » afin de pouvoir ajouter une image d'arrière-plan unique à chaque élément.
Sélectionnez le div « Gallery Image », ajoutez une classe combo « 1 », puis faites défiler jusqu'à la section Background et ajoutez une image d'arrière-plan.
Utilisez les paramètres suivants :
- Size : Cover
- Position : Center
- Tile : None
Puis ajoutez votre image.
Nous allons maintenant dupliquer ce div « Gallery Image » en faisant un clic droit et en le dupliquant autant de fois que nécessaire.
Évidemment, nous avons un léger problème : toutes les images sont identiques ! Puisque nous ajoutons les images via CSS, chaque élément avec la classe combo Gallery Image 1 aura la même image d'arrière-plan.
Pour corriger cela, ouvrez le panneau Navigator, sélectionnez un div Gallery Image, et dupliquez la classe 1. Changez ensuite le nom en 2, remplacez l'image d'arrière-plan, puis répétez ce processus pour chaque classe combo.
Étape 3 : Ajoutez des interactions
Maintenant que vous avez une classe combo séparée pour chaque image, retournez au panneau Navigator et sélectionnez le div « Gallery Scroll Track ».
Ouvrez maintenant le panneau « Interactions », cliquez sur le Plus en haut à droite. Dans le menu déroulant, sélectionnez « While Scrolling in View ».
Ensuite, changez « Smoothing » à « 60% » puis cliquez sur l'icône « Plus ».
Nommez l'interaction « Gallery Scroll Trigger ».
Cliquez sur l'icône Plus à côté du marqueur « 0% ». Dans le menu déroulant, sélectionnez la transformation « Move ».
Avec la première interaction à 0% surlignée, changez la position « X » à « 0vw ».
Ensuite, surlignez l'interaction à 100%, changez le « Keyframe » à « 80% », et définissez « X » à « -200vw ».
Étape 4 : Dernière étape !
C'est la dernière étape et une étape essentielle. Cliquez sur l'icône « Pages » dans le panneau de gauche.
Passez la souris sur l'icône « Home ». À côté apparaîtra l'icône « Edit Page Details » – cliquez sur elle. Un nouveau panneau s'ouvrira. Faites défiler jusqu'à la section intitulée « Custom Code » et collez l'extrait de code ci-dessous dans le champ de saisie « Inside <head> tag ».
<style>
.gallery-container {
position: -webkit-sticky !important;
position: sticky !important;
}
</style>
Publiez et c'est terminé !
