Scroll horizontal Wix Studio : créer un défilement horizontal sans code ↔️

Le scroll horizontal fait défiler un contenu de droite à gauche pendant que le visiteur descend dans la page. C’est un effet très utilisé pour présenter des projets, des étapes ou une galerie, et il se crée sans code sur Wix Studio.

En bref : une section très haute, un conteneur plus large que l'écran rendu sticky, et une animation au défilement qui le pousse vers la gauche. Réglez ensemble la largeur du conteneur et la distance de l'animation, sinon le défilement s'arrête trop tôt ou laisse un vide.

Le principe du scroll horizontal sur Wix Studio

On combine trois outils de Wix Studio :

• une section très haute (plusieurs fois la hauteur de l’écran), organisée avec une CSS Grid,

• un conteneur sticky, plus large que l’écran, qui reste visible pendant le défilement,

• une animation de défilement qui déplace ce conteneur vers la gauche.

Créer un scroll horizontal sur Wix Studio : étape par étape

1. Ajoutez une section et appliquez-lui une grille de 3 lignes, chacune haute de 100 vh (la hauteur de l’écran, voir les unités de mesure).

2. Dans la première ligne, placez un conteneur de 200 vw de large (deux fois la largeur de l’écran) avec vos contenus.

3. Réglez ce conteneur en position sticky.

4. Ajoutez une animation de défilement de type « Déplacer », vers la gauche (270°), sur une distance de 100 vw.

5. Masquez le débordement de la section (ce qui dépasse sur les côtés), puis testez en aperçu.

💡 Les valeurs peuvent varier selon la largeur de votre contenu : ajustez la largeur du conteneur et la distance de l’animation ensemble.

Les réglages de départ en un coup d'œil

Si vous passez à trois écrans de contenu (300 vw), augmentez aussi la distance de l'animation (200 vw) et la hauteur de la section. Le fonctionnement de la position sticky est détaillé dans la fiche effet sticky Wix Studio.

Scroll horizontal et mobile

Sur mobile, l’effet peut être moins agréable. Vérifiez chaque point de rupture : souvent, la meilleure solution est de désactiver l’animation sur mobile et d’empiler simplement les contenus les uns sous les autres.

Scroll horizontal, vitesse et SEO

Le contenu du scroll horizontal reste du vrai texte et de vraies images dans la page : Google peut donc le lire. Le risque est plutôt côté vitesse : ce type de section contient souvent beaucoup de grandes images. Compressez-les (voir la fiche images Wix Studio) et évitez de placer l'effet tout en haut de la page, où il retarderait l'affichage du contenu principal.

Mon avis de webdesigner sur le scroll horizontal Wix Studio

C’est un effet très réussi pour un portfolio ou une présentation de méthode. Mais utilisez-le une seule fois par page : répété, il fatigue le visiteur et ralentit la lecture de vos informations importantes.

Pour un site vitrine qui doit surtout convertir, réservez-le à une section « projets » ou « méthode ». Si vous voulez ce type d'effet sur votre site sans y passer vos soirées, voyez mon offre de création de site vitrine.

Questions fréquentes sur le scroll horizontal Wix Studio

Faut-il du code pour un scroll horizontal sur Wix Studio ?

Non. La grille, la position sticky et l'animation au défilement se règlent dans l'éditeur, sans Velo.

Pourquoi une barre de défilement horizontale apparaît ?

Le conteneur est plus large que l'écran. Masquez le débordement de la section pour que la partie qui dépasse reste invisible.

Peut-on faire défiler des éléments du CMS ?

Oui, en plaçant un répéteur connecté au CMS dans le conteneur. Gardez un nombre d'éléments fixe, car la distance de l'animation, elle, ne s'adapte pas toute seule.

À propos de l’auteur Alexandre Cottret, webdesigner freelance et fondateur de Trend Design, certifié Wix Partner Legend et Wix Studio. Plus de 150 sites créés depuis 2021, 5/5 sur Malt (93 avis).

Sources : Wix Studio Academy : créer un scroll horizontal, Wix : ajouter une animation au défilement.