Effet de parallaxe élémentaire avec Rellax.js (Pro)
Rellax est une extension Master Addons Pro qui apporte la bibliothèque de parallaxe Rellax.js dans Elementor Allumez-la pour un élément, définissez une vitesse de -10 à 10, et cet élément défile plus rapidement ou plus lentement que le reste de la page, ce qui crée une sensation de profondeur Vous pouvez définir une vitesse différente pour tablette et mobile, choisir la direction verticale ou horizontale et utiliser Z-Index pour continuer à déplacer les couches derrière ou devant votre contenu Aucun chargement de code ou de script n'est nécessaire.
Comment ajouter un effet de défilement de parallaxe dans Elementor
Vous avez besoin d'Elementor et d'un actif Maître Addons Pro licence.
- Aller à Additions principales, extensions: activez Rellax et enregistrez.
- Modifiez votre page avec Elementor et sélectionnez le widget que vous souhaitez déplacer, tel qu'une image, une icône ou une forme.
- Ouvrez les paramètres Rellax pour cet élément et allumez Activé Rellax.
- Définissez une vitesse, par exemple -2 pour une dérive lente, et ajustez-la pour la tablette et le mobile.
- Choisissez Vertical ou Horizontal et définissez Z-Index afin que le calque ne recouvre pas votre texte.
- Prévisualisez la page et faites défiler pour vérifier la motion.
Plus de détails sont dans le Paramètres de l'extension Rellax.
Vitesse, pourcentage et direction
Vitesse fonctionne de -10 à 10 par pas de 0,1 et peut être défini par appareil Les valeurs négatives font que l'élément se déplace plus lentement que la page, donc il se sent plus loin, et les valeurs positives le déplacent plus rapidement, donc il se sent plus proche. Pourcentage (0 à 1) définit où se trouve l'élément lorsque son mouvement commence, et le Vertical et Horizontal options choisir la direction.
- Une dérive lente de -1 à -2 pour les formes décoratives derrière un héros.
- Une petite vitesse positive pour les icônes flottantes devant le contenu.
- Une vitesse inférieure ou 0 sur mobile si le mouvement semble trop fort sur les petits écrans.
Couche avec Z-Index
Les couches de parallaxe peuvent glisser sur le texte et les boutons Rellax ajoute un Z-Index réglage de -1 à 50, afin que vous puissiez garder une couche d'arrière-plan mobile sous votre contenu et une forme de premier plan au-dessus de celui-ci Rellax déplace l'élément entier, pas son image d'arrière-plan, alors placez l'image que vous souhaitez déplacer dans son propre widget Image.
- Utilisez -1 pour les calques qui doivent se trouver derrière le contenu.
- Gardez les titres et les boutons hors du chemin des calques mobiles.
- Testez le parchemin sur un vrai téléphone avant de publier.
Effets de mouvement des éléments vs addons principaux Rellax
Elementor Pro a déjà Motion Effects avec des effets de défilement Voici comment les deux se comparent.
| Caractéristique | Effets de mouvement Elementor Pro | Maître Addons Rellax |
|---|---|---|
| Prix | Besoins d'Elementor Pro | Besoins de Master Addons Pro |
| Mouvement de défilement | Défilement vertical et horizontal avec vitesse et portée de la fenêtre | Vitesse Rellax.js de -10 à 10, verticale ou horizontale |
| Autres effets de défilement | Transparence, flou, rotation et échelle | Aucun, mouvement seulement |
| Effets de souris | Piste de souris et inclinaison 3D | Non |
| Parallaxe de fond | Effets de mouvement de fond sur les sections et les conteneurs | Déplace tout l'élément |
| Paramètres par appareil | Choisissez les appareils sur lesquels les effets s'exécutent | Vitesse par appareil |
Si vous avez déjà Elementor Pro, Motion Effects couvre plus de types d'effets Rellax convient aux simples calques basés sur la vitesse lorsque vous utilisez Master Addons Pro. Pour le mouvement de boucle qui ne dépend pas du défilement, voir Effets flottants (Pro).
Qu'est-ce que Rellax.js ?
Rellax.js est une petite bibliothèque JavaScript open source de Dixon et Moe qui fait bouger les éléments à une vitesse différente pendant qu'une page défile Sur un site codé à la main, vous ajoutez le script, donnez aux éléments une classe de rellax et définissez des options telles que la vitesse, le pourcentage, l'indice z et la direction dans le code.
Cette extension regroupe Rellax.js dans Master Addons Pro et mappe ces options aux contrôles Elementor, vous définissez donc Vitesse, Pourcentage, Z-Index et direction à partir du panneau Le script ne se charge que sur les pages où un élément utilise Rellax Si vous n'êtes pas sur Elementor, utilisez directement la bibliothèque Rellax.js.
Questions Fréquemment Posées Pour Rellax
L'effet de parallaxe fonctionnera-t-il sur mobile ?
Oui. La vitesse peut être réglée séparément pour la tablette et le mobile, vous pouvez donc utiliser une valeur plus petite ou 0 sur les téléphones si le mouvement semble trop fort. Toujours tester sur un appareil réel.
Puis-je faire bouger une image d'arrière-plan de section ?
Rellax déplace l'élément entier, pas une image d'arrière-plan Mettez l'image dans son propre widget Image derrière votre contenu et ajoutez Rellax à ce widget, ou utilisez les effets de mouvement d'arrière-plan d'Elementor Pro pour un arrière-plan de section mobile.
L'extension Rellax est-elle gratuite ?
N° Rellax fait partie de Maître Addons Pro. La bibliothèque Rellax.js elle-même est gratuite et open source si vous l'ajoutez avec votre propre code.
Trop d'effets de parallaxe peuvent-ils ralentir mon site ?
Ils peuvent. Chaque élément mobile fait travailler davantage le navigateur en faisant défiler Utilisez la parallaxe sur quelques éléments clés par page et gardez des vitesses modestes.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
