La parallaxe est l'effet où différentes parties d'une page défilent à différentes vitesses, de sorte que l'arrière-plan dérive plus lentement que le premier plan et que la section capte une sensation de profondeur. Le Relax extension dans Maître Addons Pro ajoute que Défilement de parallaxe de l'élémenteur effet aux widgets tels qu'une image ou un titre, en utilisant la bibliothèque Rellax.js, sans toucher à une ligne de JavaScript Il apparaît sous forme de section sur l'onglet Avancé de l'élément, avec des commandes pour la vitesse, le pourcentage de mouvement, l'indice z et la direction.
Voici où vit Rellax, ce que fait chaque paramètre et à quoi ressemble l'effet une fois la page en ligne.
Ce que fait l'extension Rellax #
Rellax épingle une animation basée sur le défilement à l'élément que vous sélectionnez Au fur et à mesure que le visiteur défile, cet élément se déplace plus vite ou plus lentement que le reste de la page, selon la vitesse que vous définissez Pointez-le sur une image de héros et l'arrière-plan glisse ; pointez-le sur un titre et le texte flotte devant tout ce qui l'entoure Puisque cela fonctionne par élément, vous pouvez mélanger quelques vitesses différentes dans la même section et construire un défilement en couches sans plugin de parallaxe dédié.
Considérez-le comme le cousin basé sur le défilement de deux autres outils de mouvement Master Addons : Effets flottants(en), qui anime un élément tout seul sans aucun défilement, et Transforme(en), qui les poignées tournent, s'échelonnent et s'inclinent.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Maître Addons Pro installé avec une licence active, puisque Rellax est une extension Pro. Si vous ne l'avez pas encore installé, suivez le guide d'installation.
- L'extension Rellax activée dans le panneau d'options Master Addons.
- Un widget à animer, comme une image, une icône ou un Titre du dégradé. Rellax déplace l'ensemble du widget, pas une image d'arrière-plan de section.
Comment ajouter un effet de parallaxe dans Elementor #
Sélectionnez l'élément que vous souhaitez déplacer Ouvrez le Avancé onglet dans le panneau Élémenteur et faites défiler vers le bas Rellax section (elle porte le badge violet Master Addons).Élargissez-la et retournez Activé Rellax à Oui. Cette bascule est l'interrupteur de tout l'effet, donc rien ne se passe tant qu'elle n'est pas allumée.
Une chose qui fait trébucher les gens : la parallaxe ne s'exécute que sur la page live ou en avant-première, jamais pendant que vous éditez sur la toile Alors n'attendez pas que l'élément se déplace à l'intérieur de l'éditeur, appuyez sur l'aperçu pour le voir.
Paramètres Rellax expliqués #
Avec Enabled Rellax allumé, le reste des commandes façonnent le déplacement de l'élément :
- Vitesse: la vitesse à laquelle l'élément se déplace par rapport au défilement Des nombres positifs plus élevés le font monter plus rapidement lorsque vous faites défiler vers le bas ; les nombres négatifs le poussent dans l'autre sens La démo utilise 6. Commencez vers 4 à 6 et ajustez à partir de là, car les grandes valeurs peuvent faire nettoyer un élément de sa section.
- Pourcentage: le point de départ de l'animation, de 0 à 1, en fonction de l'endroit où se trouve l'élément dans la fenêtre d'affichage La démo le définit sur 0,4. Nudge ceci lorsque l'effet entre en jeu trop tôt ou trop tard.
- Z-Index : ordre d'empilement, même idée que CSS z-index. Levez-le (la démo utilise 3) lorsqu'un élément de parallaxe doit s'asseoir au-dessus ou au-dessous d'un voisin, il chevauche à mi-défilement.
- Vertical : déplacez l'élément de haut en bas au fur et à mesure que la page défile C'est la direction habituelle de la parallaxe.
- Horizontal: déplacez plutôt l'élément vers la gauche et la droite Handy pour les éléments dans lesquels vous souhaitez glisser par le côté.
Speed et Pourcentage ont tous deux l'icône réactive à côté d'eux, vous pouvez donc définir différentes valeurs pour le bureau, la tablette et le mobile Cela compte plus que ce que ça sonne Une vitesse qui semble grande sur un bureau large peut sembler choquante sur un téléphone, où l'écran est court et l'élément couvre beaucoup de sol dans un petit espace La réduction de la vitesse du mobile est généralement la solution.
Voir l'effet de parallaxe sur la page live #
Publiez la page (ou ouvrez l'aperçu) et faites défiler L'élément que vous avez activé Rellax sur les mouvements à son propre rythme alors que le reste de la page défile normalement, et cette différence de vitesse est ce qui vend la profondeur Voici le héros de démonstration, avec une image de parallaxe défilant contre un titre de “Scroll UP” :
Si le mouvement semble trop fort ou trop subtil, revenez au contrôle de vitesse et peaufinez-le. La parallaxe est l'un de ces effets où un petit nombre lit généralement mieux qu'un grand.
Cas d'utilisation courants #
- Images de héros : donnez une dérive lente à un widget Image dans un héros de page d'atterrissage afin que la section se sente vivante au moment où quelqu'un défile.
- Des titres flottants : mettez Rellax sur un cap pour qu'il dépasse le contenu situé en dessous.
- Sections en couches : réglez deux ou trois éléments à des vitesses différentes dans la même section pour un défilement empilé et multi-profondeurs.
- Appels de fonctionnalités : faites glisser une icône ou un badge horizontalement lorsque le visiteur l'atteint.
- Pages de narration : utilisez une parallaxe douce entre les blocs pour éviter qu'un long parchemin ne se sente plat.
Pour un mouvement qui n'est pas lié au défilement, associez Rellax à Animation d'entrée ainsi, les éléments s'animent au fur et à mesure qu'ils apparaissent, puis continuent de bouger avec la parallaxe pendant que le parchemin continue. Parcourir le complet widgets et extensions liste pour voir le reste de la boîte à outils de mouvement.
Tutoriel Vidéo #
Préférer regarder ? cette vidéo parcourt l'extension Rellax bout à bout, de l'activer sur un élément au défilement de parallaxe sur la page en direct :
Foire aux questions #
Comment ajouter un effet de défilement de parallaxe dans Elementor ?
Sélectionnez un élément, ouvrez l'onglet Avancé, développez la section Rellax des addons principaux et définissez Activé Rellax sur Oui. Ensuite, définissez la vitesse et le pourcentage. L'élément défile à son propre rythme sur la page en direct, aucun code n'est requis.
Pourquoi ne puis-je pas voir l'effet de parallaxe dans l'éditeur Elementor ?
Rellax ne fonctionne que sur le front-end L'élément reste immobile pendant que vous modifiez sur le canevas, alors ouvrez l'aperçu ou affichez la page publiée pour voir le mouvement de parallaxe.
Que fait le réglage de la vitesse à Rellax ?
La vitesse contrôle la vitesse à laquelle l'élément se déplace par rapport au défilement de la page Des valeurs positives plus élevées le font monter plus rapidement lorsque vous faites défiler vers le bas, et des valeurs négatives inversent la direction Les valeurs autour de 4 à 6 fonctionnent bien pour la plupart des sections de héros.
Puis-je utiliser une vitesse de parallaxe différente sur mobile ?
Oui. Les commandes Vitesse et Pourcentage sont réactives, vous pouvez donc définir des valeurs distinctes pour les ordinateurs de bureau, les tablettes et les mobiles. Réduire la vitesse sur mobile évite que l'effet ne se sente trop agressif sur les petits écrans.
L'extension Rellax ralentit-elle mon site ?
Rellax exécute une animation par élément basée sur le défilement, de sorte que l'impact reste faible Appliquez-le uniquement aux éléments qui en ont besoin, plutôt qu'à chaque bloc de la page, et les choses restent fluides.
Envelopper #
L'extension Rellax est le moyen le plus rapide d'ajouter un Défilement de parallaxe de l'élémenteur effet sans plugin séparé ni code personnalisé Activez-le sur n'importe quel élément, définissez la vitesse, le pourcentage, l'indice z et la direction, et l'élément défile avec une réelle profondeur sur la page en direct. Pour plus de façons de déplacer les choses sur l'écran, jetez un œil à Transforme et Effets flottants& voir le Page d'extension de parallaxe Rellax pour une comparaison avec Elementor Pro Motion Effects.
