Une page où tout reste là se lit comme un PDF. Une page où les sections s'intègrent lorsque vous les atteignez semble construite Animation d'entrée extension dans Modules complémentaires principaux pour Elementor ajoute ce mouvement à n'importe quel élément : choisissez un effet dans une bibliothèque de 70 animations, définissez le timing et l'élément anime le moment où il défile dans la vue. Il fait partie de Master Addons Pro et du Extension d'animation d'entrée de l'élémenteur page montre comment il se compare avec l'option intégrée d'Elementor.
Voici l'effet sur une page réelle Chaque section s'efface et monte en entrant dans la fenêtre d'affichage :
Ce que fait l'extension Entry Animation #
Une fois activé, chaque élément Élémenteur obtient un Animation d'entrée section sous le Avancé onglet. Attribuez-y une animation, et l'élément commence caché, puis joue son effet lorsque le visiteur y défile Sections, conteneurs, titres, images, boutons : tout ce qui se trouve dans l'éditeur peut porter sa propre entrée.
La bibliothèque d'animation couvre toute la gamme des styles d'entrée :
- Fondu En famille : simple, bas, haut, gauche et droite, chacune avec des variations numérotées qui modifient la distance de déplacement.
- Glisser de Droite, Gauche, Haut et Bas.
- Masque de En haut, en bas, à gauche et à droite, qui essuyent l'élément.
- Faites pivoter vers avec des variantes Down et Up vers chaque coin.
- Zoom avant et Augmenter/Évaluer familles pour la profondeur.
- Retourner Haut, bas, gauche et droite, plus Impulsion dans, Sortir, Secouer, Rebondir, et Jack dans la boîte.
Avant de commencer #
- WordPress avec Élémenteur installé et actif.
- Modules complémentaires principaux pour Elementor installé et actif. Nouveau au plugin ? Suivez le guide d'installation d'abord.
- Un actif Maître Addons Pro licence, puisque Entry Animation est une extension Pro.
Comment activer l'extension Entrée Animation #
Depuis votre tableau de bord WordPress, rendez-vous sur Additions maîtres et ouvrez le Extensions onglet. L'animation d'entrée mène le Widgets d'animation grouper avec un badge Hot, à côté de Transforms and Reveal Cliquez sur sa bascule pour qu'elle devienne violette, puis frappez Enregistrer Modifications et attendez l'avis de” vert “Settings enregistré avec succès.
Choisissez une animation pour un élément #
Sélectionnez l'élément dans l'éditeur Elementor, ouvrez le Avancé onglet, et développez le Animation d'entrée section avec le badge violet MA. Le Animation dropdown détient toute la bibliothèque Dans la démo, la section héros obtient un effet Fade In tandis que le dropdown montre les groupes Fade, Slide, Mask, Rotate, Zoom et Scale défilant.
Choisissez-en un et l'éditeur le prévisualise immédiatement, afin que vous puissiez parcourir les options jusqu'à ce que le mouvement corresponde au contenu. Fade In Up est la valeur par défaut sûre : ascenseur subtil, pas de drame, fonctionne sur presque tout.
Réglez le timing #
Sous le dépôt Animation se trouvent quatre commandes de synchronisation.
- Durée (ms) : combien de temps dure l'animation La démo utilise un 5000 m exagéré donc le mouvement est facile à voir ; sur les pages de production, 400 à 800 ms se sentent généralement bien.
- Retard (ms) : une pause avant que l'effet ne commence, 400 ms dans la démo Stagger retarde sur les éléments frères et sœurs et ils entrent les uns après les autres au lieu d'un tout à la fois.
- Facilité: la courbe d'accélération. fonctionne par défaut, mais une servitude atterrit plus naturellement pour les entrées.
- Nombre de répétitions : combien de fois l'effet joue, de 1 à 5, ou infini.
Le résultat sur la page #
Publier et faire défiler Chaque élément tient jusqu'à ce qu'il entre dans la fenêtre, puis joue son entrée : la liste des fonctionnalités se met en place, les cartes de service s'effacent en rangée, et la section équipe suit lorsque vous l'atteignez Le GIF d'animation en haut de cette page montre la séquence exacte du site de démonstration.
Une mise en garde de la pratique : animer des sections, pas tous les widgets à l'intérieur d'elles Une page où cinquante éléments chacun s'envolent de quelque part se lit comme du bruit Une entrée par section garde le rythme.
Où les animations d'entrée fonctionnent bien #
- Sections héros. Un titre fondu donne le ton au moment où la page se charge.
- Lignes caractéristiques. Cartes qui montent en séquence, en utilisant des délais échelonnés.
- Statistiques et comptoirs. Le mouvement attire le regard lorsque les chiffres défilent.
- Témoignages. Citations qui facilitent la lecture sous forme de moments au lieu d'un mur de texte.
- Longues pages de destination. Chaque section qui s'annonce maintient l'élan du défilement.
Tutoriel Vidéo #
Regardez les animations en mouvement, depuis l'activation de l'extension jusqu'à la page terminée.
Foire aux questions #
Comment ajouter une animation d'entrée dans Elementor ?
Activez l'extension Entrée Animation dans l'onglet Extensions des addons principaux, sélectionnez n'importe quel élément dans l'éditeur et ouvrez Entrée Animation sous l'onglet Avancé Choisissez un effet dans la liste déroulante Animation, définissez la durée et le délai, et l'élément s'anime lorsqu'il défile dans la vue.
Quelles animations sont incluses dans l'extension ?
70 effets : Fade In (haut, bas, gauche et droite, avec variations), Slide From et Mask From dans les quatre directions, Rotate In vers chaque coin, Zoom In, Scale Up and Scale Down, Flip In, Pulse In et Pulse Out, Shake, Bounce In et Jack In the Box Chacun fonctionne sur les sections, les conteneurs et les widgets individuels.
Quand joue l'animation d'entrée ?
Lorsque l'élément entre dans la fenêtre d'affichage Les éléments au-dessus du pli s'animent sur le chargement de la page, et tout plus bas attend que le visiteur y fasse défiler Le paramètre Retard ajoute une pause avant le début de l'effet, c'est ainsi que vous échelonnez une rangée de cartes.
Puis-je contrôler la vitesse d'animation ?
Oui. La durée définit la longueur de l'effet en millisecondes, le délai reporte son début, l'assouplissement façonne la courbe d'accélération et le nombre de répétitions. Une durée de 400 à 800 ms avec un court décalage entre les éléments couvre la plupart des conceptions.
L'extension Entrée Animation est-elle gratuite ?
No. Entry Animation fait partie de Master Addons Pro. L'éditeur gratuit d'Elementor possède sa propre animation d'entrée de base sous Advanced, Motion Effects, avec une durée prédéfinie et un délai.
Envelopper #
Le Extension d'animation d'entrée donne à chaque élément Élémenteur une entrée déclenchée par défilement : une liste déroulante pour l'effet, quatre champs pour le timing Gardez les durées en dessous d'une seconde, échelonnez les délais et animez au niveau de la section, et la page semble délibérée au lieu d'être décorée. Pour un mouvement qui boucle tout seul au lieu de jouer une fois sur le défilement, regardez le Extension des effets flottants (Pro), et la liste complète des Widgets et extensions Master Addons a le reste.
