Les animations déclenchées par le défilement peuvent changer la donne pour votre site web, en améliorant son interactivité et en rendant son contenu plus attrayant. Lorsque les utilisateurs font défiler la page vers le bas, les animations lui donnent de la profondeur, attirent l'attention et rendent l'expérience de navigation plus immersive. Si vous utilisez Elementor ProEn outre, l'ajout de ces animations est très simple. Voici un guide qui vous aidera à démarrer et à tirer le meilleur parti de ces effets, y compris des animations de parallaxe pour une conception plus stratifiée.

Pourquoi utiliser des animations déclenchées par le défilement ?

Ces animations présentent des avantages non négligeables :

• Mettez en évidence les éléments importants: Les animations attirent naturellement l'attention, ce qui vous permet de mettre en valeur les sections essentielles de votre site.
• Améliorer l'engagement des utilisateurs: Lorsque le contenu se dévoile progressivement, les utilisateurs sont plus enclins à rester engagés.
• Racontez une histoire: La façon dont le contenu se déroule peut guider l'utilisateur à travers votre page, étape par étape, en maintenant son intérêt.

Avec Elementor Proil est facile de mettre en œuvre ces animations et d'amener votre site web à un niveau de qualité supérieur. vie.

Étape 1 : Configurer la structure de votre page dans Elementor Pro

Avant de commencer à animer, vous devez définir la structure de base de votre page. Par exemple, disons que vous créez une section "héros" avec un titre, une image et un texte d'accompagnement.

Création d'une nouvelle section:

1. Ouvrir Elementorajoutez une nouvelle page et utilisez Elementor Edit pour accéder à la page d'édition.

2. Cliquez sur le bouton "Ajouter un nouveau conteneur"sur la page.

3. Sélectionnez un disposition en deux colonnes avec le côté gauche pour ajouter du contenu textuel (tel qu'un titre et texte justificatif) et le côté droit pour ajouter une image afin d'améliorer l'aspect visuel.

Ajouter du contenu :

1. Colonne de gauche: Ajouter un widget titre et un widget de texte pour afficher les informations principales de la page.

2. Colonne de droite: ajouter un widget image pour placer une image visuelle pertinente afin d'ajouter un attrait visuel à la page.

Chaque bloc peut être modifié pour compléter les éléments souhaités. Cette configuration simple prépare le terrain pour une conception efficace avant que vous ne commenciez à ajouter des animations.

Étape 2 : Ajouter une animation de défilement à votre titre

Animons le titre pour qu'il glisse en douceur depuis la gauche lorsque l'utilisateur fait défiler l'écran vers le bas.

Sélection du widget d'en-tête:

• Cliquez sur le widget Heading pour ouvrir ses paramètres.

Activation des effets de défilement:

• Allez dans l'onglet Avancé.

• Sous Effets de mouvement, allumez Effets de défilement.

Réglage du défilement horizontal:

• Activer le défilement horizontal effet.

• Réglez la direction sur "de gauche à droite.“

• Ajustez la vitesse à environ 4 pour un effet lisse et visible.

Avant-première:

Lorsque vous faites défiler la page, vous verrez le titre glisser vers la gauche. Vous pouvez modifier la vitesse et la direction jusqu'à ce que vous obteniez l'effet désiré.

Étape 3 : Ajout d'un effet de parallaxe à l'image

Pour rendre votre page plus dynamique, nous allons maintenant ajouter un effet de parallaxe à l'image. L'image se déplace à une vitesse différente de celle du texte, ce qui crée un effet de superposition et de 3D.

Sélection du widget image:

• Cliquez sur le widget Image et ouvrez ses paramètres.

Activation des effets de défilement:

• Sous l'onglet Avancé, activez Effets de défilement.

Application du défilement vertical:

• Activez le défilement vertical et réglez la vitesse à environ 1,5. Vous obtiendrez ainsi un effet de parallaxe subtil et fluide, l'image se déplaçant plus lentement que le texte.

Ajout de modifications de l'opacité:

• Activer Transparence sous les options de défilement.

• Réglez le Transparence pour se situer dans une fourchette de 0% (entièrement transparent) à 100% (entièrement visible)L'effet de fondu permet à l'image de s'intégrer progressivement au fur et à mesure que l'utilisateur fait défiler la page. Ajustez la barre de défilement pour contrôler le moment où l'effet de fondu commence et se termine, afin d'améliorer l'expérience de défilement grâce à une transition visuelle en douceur.

L'image apparaîtra progressivement, ce qui ajoutera de la profondeur à l'expérience visuelle.

Étape 4 : Création d'un visuel en couches avec Parallaxe

Pour améliorer encore le design, vous pouvez ajouter des effets de parallaxe à d'autres éléments, tels que les images d'arrière-plan.

Ajout d'une image d'arrière-plan:

• Cliquez sur le conteneur extérieur de votre section et accédez à l'onglet Style.

• Ajoutez une image de fond.

Activation des effets de défilement pour l'arrière-plan:

• Dans l'onglet Avancé, activez Effets de défilement.

• Réglez la vitesse de défilement vertical à environ 0,5, de sorte que l'arrière-plan se déplace plus lentement que les éléments de premier plan.

Avant-première:

En défilant vers le bas, vous verrez un effet entièrement dynamique : le titre glisse, l'image se déplace avec un effet de parallaxe et l'arrière-plan se déplace subtilement à l'arrière.

Étape 5 : Ajouter une animation de déclenchement de défilement pour le texte

Sélectionnez le widget de texte :

• Cliquez sur le bouton zone de texte pour accéder à l'interface de paramétrage du texte.

Activez l'effet de défilement :

1. Aller à le niveau avancé tabulation.
2. Sous Effets de mouvement, permettre Défilement Effets.

Sélectionnez l'option Transparence pour créer un effet de fondu sur le texte.

Définissez l'animation de la transparence :

• Définissez la plage de transparence de 0% (totalement transparent) à 100% (entièrement visible). Le texte passera de transparent à visible lorsque l'utilisateur fera défiler la page, créant ainsi une transition en douceur.

Définissez le point de déclenchement :

• Dans le cadre de la Effet de défilement vous pouvez ajuster les paramètres de la Fenêtre de visualisation Pourcentage pour spécifier où l'animation commence et se termine le défilement. Par exemple, si vous réglez l'animation pour qu'elle se déclenche lorsque l'utilisateur fait défiler la page entre 20% et 80% de la page permet au texte d'apparaître avec le contenu de la page.

Étape 6 : Ajouter un effet de diapositive

Sélectionnez l'effet Diapositive :

• Dans le cadre de la Avancé > Effets de mouvement sélectionnez Vers l'animationpuis sélectionnez Slide In dans le menu déroulant.

• Vous pouvez choisir l'insertion par la gauche, l'insertion par la droite ou l'insertion par le bas, en fonction de vos besoins en matière de conception.

Cela s'applique à tous les scénarios dans lesquels vous souhaitez améliorer l'attrait visuel d'une page web et l'interactivité avec l'utilisateur.

Étape 7 : Optimisation de l'expérience utilisateur

Les animations déclenchées par le défilement peuvent améliorer considérablement un site web, mais vous devez veiller à ce que l'expérience de l'utilisateur soit fluide. Voici quelques conseils :

Restez simple: Trop d'animations peuvent submerger l'utilisateur. Contentez-vous de quelques effets bien placés pour conserver un aspect professionnel.

Optimisation mobile: Toutes les animations ne fonctionnent pas bien sur les appareils mobiles. Dans Elementor Pro, vous pouvez désactiver des animations spécifiques pour les mobiles et les tablettes afin que le site reste réactif et convivial.

Tests inter-navigateurs: Les animations de défilement peuvent se comporter différemment d'un navigateur à l'autre. Testez toujours votre projet dans les navigateurs les plus courants pour vous assurer de sa cohérence.

Conclusion

Les animations déclenchées par le défilement et les effets de parallaxe peuvent transformer votre site web, le rendant plus attrayant et plus séduisant. Grâce aux fonctionnalités d'Elementor Pro, vous pouvez mettre en œuvre des animations de texte subtiles ou des conceptions complexes en couches. Lorsqu'ils sont bien réalisés, ces effets guident l'attention de l'utilisateur, racontent une histoire à travers votre contenu et créent une expérience de navigation transparente sur tous les appareils.

En suivant ces étapes, vous pouvez créer des pages web dynamiques et immersives qui captivent les utilisateurs tout en conservant une conception fonctionnelle et réactive.