Le défilement ne doit pas toujours descendre sur la page. Parfois, le déplacement d'un côté à l'autre est un meilleur ajustement, surtout lorsque vous montrez des galeries d'images, des sections de fonctionnalités ou une histoire étape par étape.

Le défilement horizontal vous donne un moyen plus propre et plus engageant de guider les visiteurs à travers votre contenu. C'est un excellent choix pour les points forts des produits, la narration visuelle ou toute mise en page qui nécessite un peu de mouvement supplémentaire pour se démarquer.

Broche horizontale RS | Défilement horizontal GSAP RS

Configurer le défilement horizontal RS

Activer le défilement horizontal Active l'effet de défilement horizontal sur le conteneur. Vous trouverez trois options : par défaut, oui et non.
Par défaut : aucun effet n'est appliqué. Oui : le défilement horizontal est activé sur le conteneur. non : désactive explicitement l'effet sur ce point d'arrêt. Ce contrôle est réactif, vous pouvez donc l'activer ou la désactiver par appareil (bureau, tablette, mobile).

modèle de travail Définit le comportement de l'animation de défilement horizontal. Vous trouverez deux options : Normal et Masquage.
Normal : le contenu défile horizontalement lorsque l'utilisateur fait défiler la page. Masquage : les éléments sont révélés avec un effet de détourage lorsque l'utilisateur défile, traitant chaque conteneur enfant comme une diapositive.

sens Contrôle la manière dont le contenu se déplace pendant le défilement. Vous trouverez deux options : de droite à gauche et de gauche à droite.
De droite à gauche : sens par défaut, le contenu se déplace vers la gauche lorsque l'utilisateur défile. De gauche à droite : le contenu se déplace vers la droite lorsque l'utilisateur défile vers le bas.

Largeur de la zone de défi Définit la largeur totale de la zone de défilement horizontal en pourcentage. Une valeur de 500 % signifie que le contenu est de 5 fois la largeur de l'écran et que l'utilisateur fait défiler tout en faisant défiler la page. La plage est de 10 à 1 000 %, la valeur par défaut est de 500 %. Uniquement disponible lorsque le modèle de travail est défini sur Normal.

Hauteur de section Définit la hauteur de la section de défilement collant lors de l'utilisation du modèle de masquage. Cette hauteur s'applique à chaque élément enfant. Uniquement disponible lorsque le modèle de travail est défini sur Masquage.

Décalage supérieur Ajuste l'endroit où la zone de défilement horizontale démarre verticalement, en pixels. Utilisez ceci pour tenir compte d'un en-tête fixe ou d'une navigation collante afin que le défilement commence à la bonne position à l'écran.

barre de progression Affiche ou masque un indicateur de progression qui se remplit lorsque l'utilisateur fait défiler le contenu horizontal, ce qui donne aux visiteurs une idée de la distance à travers la section qu'ils se trouvent.

numéro de pagination Affiche ou masque un compteur (par exemple 2 / 5) qui se met à jour lorsque l'utilisateur parcourt les sections de contenu horizontal.

Cette page vous a-t-elle été utile ?

laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués *

Sept + un =