Parallax Wix Studio : créer un effet de profondeur sans code 🌄

L'effet parallax donne de la profondeur à une page : l'arrière-plan défile moins vite que le premier plan, comme un paysage vu depuis un train. Sur Wix Studio, il se crée sans une ligne de code.

En bref : pour un parallax Wix classique, sélectionnez une section avec une image ou une vidéo de fond, ouvrez l'Inspecteur, onglet Animations et effets, puis ajoutez un effet de défilement de type Parallax. Pour un parallax plus riche, animez plusieurs calques à des vitesses différentes. Gardez l'effet sur une ou deux sections, pas partout.

Qu'est-ce que l'effet parallax sur un site Wix ?

C'est un effet de défilement (scroll) où plusieurs couches bougent à des vitesses différentes. Le cerveau interprète cet écart comme de la distance : l'image semble plus loin, le texte plus proche. L'effet parallax est très utilisé pour une section hero, une transition entre deux parties d'une page ou une galerie de projets.

Les 3 façons de faire un parallax sur Wix Studio

Créer un parallax sur le fond d'une section

1. Ajoutez une image ou une vidéo en arrière-plan de la section.

2. Sélectionnez la section et ouvrez l'Inspecteur (icône en haut à droite).

3. Allez dans l'onglet Animations et effets.

4. Cliquez sur Ajouter dans la partie défilement.

5. Choisissez l'effet Parallax (Wix propose aussi des effets 3D ou zoom), puis prévisualisez.

Les effets proposés dépendent du type de fond choisi : avec un simple fond de couleur, vous ne verrez pas les mêmes options qu'avec une image. Sur l'ancien éditeur Wix, l'aide officielle précise d'ailleurs que la vitesse du parallax de fond ne se règle pas.

Créer un parallax à plusieurs calques

Pour un rendu plus « cinéma », Wix Studio Academy montre une méthode sans code : des sections plein écran, un grand conteneur, des cartes qui se chevauchent et des textures, chaque couche avec sa propre animation au défilement. Plus la distance de déplacement est grande, plus le calque semble proche.

• Arrière-plan : déplacement faible (il paraît lointain).

• Images ou cartes : déplacement moyen.

• Petits éléments décoratifs : déplacement plus fort (ils paraissent proches).

• Texte : fixe ou presque, pour rester lisible.

Vous pouvez combiner ce principe avec un effet sticky : le conteneur reste en place pendant que les calques glissent autour de lui.

Parallax, vitesse et SEO : les précautions

Un effet parallax repose presque toujours sur une grande image ou une vidéo. C'est souvent l'élément le plus lourd de la page, et Google en tient compte dans les Core Web Vitals. Compressez l'image de fond et évitez les vidéos lourdes en haut de page.

• Ne mettez pas de texte important uniquement dans l'image de fond : Google et les lecteurs d'écran ne le lisent pas.

• Vérifiez le rendu sur chaque point de rupture, surtout sur mobile.

• Limitez l'effet à une ou deux sections par page.

Mon avis de webdesigner sur le parallax Wix

Le parallax fonctionne bien quand il sert une émotion : une photo de chantier, un paysage, un produit mis en scène. Il fonctionne mal quand il est appliqué à toutes les sections, parce que le visiteur finit par avoir l'impression que la page glisse sous ses doigts.

Mon conseil : un parallax discret sur le fond du hero ou d'une section de transition, et des sections calmes autour. Si vous voulez un site qui a de l'impact sans sacrifier la vitesse, c'est exactement le type d'arbitrage que je fais comme agence Wix.

Questions fréquentes sur le parallax Wix Studio

Peut-on régler la vitesse du parallax sur Wix ?

Pour l'effet de fond, pas directement. Pour contrôler finement la vitesse, utilisez plutôt des animations au défilement sur vos éléments : la distance de déplacement joue le rôle de la vitesse.

Faut-il du code pour un parallax sur Wix Studio ?

Non. Les effets de fond et les animations au défilement se règlent dans l'Inspecteur, sans code.

Le parallax fonctionne-t-il sur mobile ?

Oui, mais le rendu est moins spectaculaire sur un petit écran. Testez l'aperçu mobile et simplifiez l'effet si la lecture devient pénible.

À 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 : personnaliser le fond d'une section, Wix Studio Academy : effets parallax avancés.