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 plus de 40 animations, définissez le timing et l'élément anime le moment où il défile.
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.
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.
- Entry Animation est une extension gratuite, donc aucune licence Pro n'est requise.
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.
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 ?
Plus de 40 effets dans six familles : Fade In (haut, bas, gauche, droite avec variations), Slide From all four directions, Mask From the four directions, Rotate In towards each corner, Zoom In, and Scale Up or Down Chacun fonctionne sur des sections, des conteneurs, et des 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 ?
Oui. Entrée Animation est livrée avec la version gratuite de Master Addons for Elementor, dans le groupe Animation Widgets de l'onglet Extensions. Le page de tarification couvre ce que les plans Pro ajoutent.
Envelopper #
L'extension Entrée Animation 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 sous 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 répond au curseur au lieu du défilement, regardez le Extension des effets flottants&, et la liste complète des Widgets et extensions Master Addons a le reste.
