Trois façons d'implémenter une animation de défilement dans WordPress : Plugins, Elementor et Tutoriels CSS

animation de défilementAjouter des effets dynamiques à votre site web ne rend pas seulement la page web plus attrayante, mais améliore également l'expérience de l'utilisateur. Vous pouvez penser qu'il s'agit d'une fonctionnalité avancée, mais il est en fait très simple d'ajouter une animation de défilement dans WordPress. Dans cet article, nous allons vous présenter différentes façons de mettre en place une animation de défilement dans WordPress, y compris en utilisant la fonctionplug-in (composant logiciel)et les constructeurs de pages tels que Elementor), et l'utilisation debalise d'ancragerépondre en chantant CSS Mettre en œuvre des effets d'animation de base.

Comment ajouter une animation de défilement dans WordPress ? (différentes méthodes)

Méthode 1 : Utiliser des plug-ins Séquence de défilement

Séquence de défilement est un plugin conçu pour créer des animations de défilement. Le pluginfaire passer (un projet de loi, une inspection, etc.)gamme deimage fixeMettez en œuvre un effet d'animation pour que l'utilisateur voie un effet de lecture semblable à celui d'une vidéo lorsqu'il fait défiler la page.

déplacer: :

1. Installez et activez le plugin: :
   • Connectez-vous à votre tableau de bord WordPress et naviguez vers Plugins > Ajouter un nouveau pluginSi vous souhaitez installer le plugin, recherchez "Scrollsequence", installez et activez le plugin.

2. Accès au menu de la séquence de défilement: :
   • Une fois activée, l'option Séquence de défilement apparaîtra sur le côté gauche du tableau de bord, cliquez pour accéder à ce menu.

3. Préparation de l'animation: :
   • En utilisant une courte vidéo (5-10 secondes), la vidéo peut être visionnée à l'aide d'un outil tel que l'application Ezgif) Divisez la vidéo encadre photoTéléchargez ces images.

4. Création d'une nouvelle animation de défilement: :
   • Dans le menu Séquence de défilement, cliquez sur "Ajout d'une nouvelle séquence de défilement"téléchargez les images et définissez la séquence d'animation.
   • Mise en scène: :
     • existent Scène plusieurs scènes peuvent être ajoutées (si vous le souhaitez). Chaque scène représente une partie de la séquence de défilement.
     • Pour ajouter d'autres scènes, vous pouvez cliquer sur le bouton situé à côté de "Scène 0". + Bouton.

4. Paramètres d'animation personnalisés: :
   • Ajustez les paramètres tels que le point de départ, le point d'arrivée et la direction de défilement de l'animation, et sélectionnez le type d'animation (collante ou statique).

5. Prévisualisation et enregistrement: :
   • Cliquez sur Aperçu pour confirmer l'animation et enfin cliquez sur Publier etCollez le shortcode généré dans la page.

Le plugin Scrollsequence est un outil efficace pour créer des effets interactifs pour les scènes qui nécessitent des animations de défilement complexes.

Méthode 2 : Utilisez Elementor pour créer une animation de défilement

Elementor est un constructeur de pages populaire pour WordPress qui utilise la technologieElementor ProPrise en charge de la création d'animations de défilement simples. Vous trouverez ci-dessous les étapes à suivre pour mettre en place une animation de défilement d'images à l'aide d'Elementor :

1. Créez une nouvelle page et allez dans Elementor Edit: :
   • Création d'un nouveau site WordPresspage webCliquez sur "Utilisation de l'éditeur Elementor"Bouton.

2. Insérer une image: :
   • Ajouter unphotographiesélectionnez l'image à afficher.

3. Réglage de la taille de l'image: :
   • Ajustez la taille de l'image si nécessaire pour qu'elle soit clairement visible à l'écran.
4. Activer les effets de mouvement: :
   • Recherchez l'option Effets de mouvement dans l'onglet Avancé du module Image et activez l'effet de défilement.

5. Réglage du sens de défilement: :
   • Sélectionnez l'effet "Défilement horizontal" et réglez la direction sur ".le droit"ou"vers la gauche"qui permet à l'image de se déplacer avec le défilement de la page.

6. Prévisualisation et publication: :
   • Faites défiler la page vers le bas pour voir l'effet et publiez la page après avoir confirmé qu'elle est correcte.

Les effets de défilement d'Elementor conviennent aux besoins d'animation simples et nécessitent la version Pro d'Elementor.

Méthode 3 : utiliser les balises d'ancrage et le CSS pour obtenir un défilement fluide

Si seulement un simpleScroll Jump RotatorVous pouvez utiliser le HTML et la balise d'ancrage CSS Obtenez un défilement fluide.

déplacer: :

1. Définition de la balise d'ancrage: :
   • Mettez en place des balises d'ancrage sur la page afin d'ajouter un identifiant unique pour le contenu cible du saut (par ex. id="section1").

2. Création de liens directs: :
   • Créez un lien sur la page qui pointe vers cette balise d'ancrage. Par exemple, créez un lien sur la page qui pointe vers cette balise d'ancrage.<a href="#section1">Aller à la section</a>.

3. Ajouter le CSS Smooth Scroll: :
   • Ajoutez le code suivant dans la section "Custom CSS" de WordPress :

html { scroll-behavior : smooth ; }
html { scroll-behavior : smooth ; }
html { scroll-behavior : smooth ; }

Ce code rendra le défilement de la page fluide et apportera une meilleure expérience de navigation aux utilisateurs.

rendre un verdict

Les animations de défilement sont un moyen efficace d'améliorer l'expérience utilisateur et l'attrait visuel de votre site web WordPress. Avec le plugin Scrollsequence, le constructeur de pages Elementor et le simple défilement CSS, il est facile de mettre en œuvre une variété d'effets d'animation de défilement sur votre site web.