Comment ajouter des effets de parallaxe à votre site web WordPress : du codage manuel à l'utilisation d'Elementor

effet de parallaxeest une technique de conception web courante qui crée un sentiment de profondeur et de dynamisme à mesure que la page défile, rendant les pages web plus vivantes et interactives. Dans un site web WordPress, vous pouvez obtenir des effets de parallaxe de plusieurs façons, y compris par codage manuel, en utilisant la fonctionplug-in (composant logiciel)ou par Elementor l'éditeur de pages. Cet article détaille ces méthodes afin de vous aider à choisir le moyen le plus approprié pour ajouter des effets de parallaxe à votre site web.

I. Ajouter un effet de parallaxe manuellement (convient aux utilisateurs ayant de l'expérience en matière de codage)

La mise en œuvre manuelle de l'effet de parallaxe nécessite un certain nombre de connaissances en HTML et en CSS Connaissances. Si vous n'êtes pas familier avec le code, vous trouverez peut-être cette approche plus complexe et les possibilités de personnalisation de l'effet de parallaxe plus limitées. Cependant, elle offre un maximum de liberté.

Étape 1 : Télécharger les images

Tout d'abord, vous devez télécharger l'image que vous souhaitez utiliser comme arrière-plan sur le site WordPress. Après avoir téléchargé une image dans la médiathèque de WordPress, copiez l'URL de l'image.

Étape 2 : Ajouter le code CSS

Ensuite, écrivez le code CSS pour l'image afin d'obtenir l'effet de parallaxe. Ajoutez le code CSS suivant à la sectionfeuille de styleAu milieu :

. Parallaxe {
  background-image : url("image URL.jpg") ; /* Remplacer par l'URL de l'image téléchargée */
  height : 500px ; /* Fixe la hauteur de l'élément parallaxe */
  background-attachment : fixed ; /* Fond fixe pour créer un effet de parallaxe */
  background-position : centre ; /* définir la position de l'arrière-plan */
  background-repeat : no-repeat ; /* background-no-repeat */
  Taille de l'arrière-plan : couverture ; /* background-image-cover-entire-area */
}

Étape 3 : Ajouter le code HTML

Insérez le code HTML suivant à l'endroit approprié de la page :

Ce code insère une image de fond sur la page avec un effet de parallaxe. Il peut être ajusté en fonction des besoins hauteuretPosition de l'arrière-plan et d'autres paramètres.

Limites et défis :

Bien que cette approche soit flexible, elle présente certaines limites. Si vous souhaitez interagir davantage ou créer des effets de parallaxe plus complexes, vous devrez peut-être maîtriser d'autres techniques JavaScript. Cette approche ne convient pas aux débutants et les erreurs de codage peuvent entraîner des problèmes de mise en page de votre site web.

Deuxièmement, l'utilisation de plug-ins pour ajouter des effets de parallaxe (pour les utilisateurs qui ne sont pas familiers avec le codage).

Pour la plupart des utilisateurs, l'ajout d'un effet de parallaxe à l'aide d'un plugin est une option plus facile et plus intuitive.WordPress propose un certain nombre de plugins qui facilitent la mise en œuvre d'effets de parallaxe, tels que Compléments essentielsetMagie du défilementetSlider Kreatura etc. Voici un exemple de Image de parallaxe comme exemple d'utilisation du plugin pour obtenir l'effet de parallaxe.

Étape 1 : Installer et activer le plugin

Allez dans le backend de WordPress, ouvrez la page de gestion des plugins et recherchez Image de parallaxe Plugin et installez-le. Une fois l'installation terminée, cliquez sur le bouton "Activer".

Étape 2 : Ajouter la parallaxe

Après l'installation et l'activation du plugin, vous pouvez utiliser la fonctioncode court(shortcode) pour ajouter des effets de parallaxe. Le plugin contient des instructions sur la manière de générer des effets de parallaxe, et le côté mobile peut être séparé séparément.

Par exemple, dans l'éditeur de pages, insérez un code similaire au suivant :

[dd-parallax img="Image URL.jpg" parallax background "height="600" speed="3" z-index="-100" mobile="mobile-image.jpg"]
     Texte à superposer à la fenêtre de parallaxe
[/dd-parallax]

Ainsi, vous pouvez facilement ajouter des effets de parallaxe à vos pages sans codage.

Étape 3 : Réglage des paramètres de l'effet de parallaxe

Certains plugins tels que Magie du défilement Des paramètres plus complexes et des options de personnalisation sont disponibles. Par exemple, le plugin ScrollMagic permet de contrôler les effets de parallaxe à l'aide d'un simple code JavaScript :

// Initialiser le contrôleur
var controller = new ScrollMagic.

// Créer la scène
var scene = new ScrollMagic.Scene({
  duration : 100, // durée de la scène
  offset : 50 // Distance de défilement du début de la scène
})
.setPin('#my-sticky-element') // épingle l'élément à la page
.addTo(controller) ; // ajoute la scène au contrôleur

L'avantage de ces plugins est qu'ils offrent plus d'options de visualisation et de personnalisation pour les utilisateurs qui ne veulent pas se salir les mains en écrivant du code.

Ajoutez des effets de parallaxe avec Elementor (le meilleur pour la plupart des utilisateurs)

Elementor L'un des éditeurs de pages WordPress les plus populaires à l'heure actuelle, il offre aux utilisateurs une multitude de fonctionnalités qui rendent l'ajout d'effets de parallaxe facile et intuitif. Avec Elementor, vous pouvez facilement ajouter des effets de parallaxe aux éléments de page et aux arrière-plans. Voici les étapes détaillées :

1. effets de parallaxe sur les éléments web

Étape 1 : Sélectionnez les éléments auxquels vous souhaitez appliquer l'effet de parallaxe

Tout d'abord, ouvrez l'éditeur Elementorpage webSélectionnez l'élément auquel vous souhaitez ajouter l'effet de parallaxe. Il peut s'agir d'une image, d'un texte, d'un bouton, etc.

Étape 2 : Activer le défilement

dans l'élément niveau élevé trouvez l'onglet effet de mouvement inférieur effet de défilementet lui attribuer la valeur rédiger (une ordonnance, un chèque, une facture, etc.). Ainsi, vous pouvez choisir parmi 6 animations de défilement pour l'élément afin d'obtenir différents effets de parallaxe.

Étape 3 : Réglage des paramètres d'animation

Cliquez sur l'icône en forme de crayon pour accéder à l'interface de paramétrage, où vous pouvez ajuster la direction, la vitesse et les positions de départ et d'arrivée de l'animation. Par exemple, vous pouvez faire en sorte que l'animation commence en haut de la page et qu'elle s'agrandisse ou tourne progressivement au fur et à mesure que vous faites défiler la page.

Étape 4 : Appliquer plusieurs animations à l'élément

Elementor vous permet d'appliquer plusieurs animations de défilement au même élément, qui peuvent être combinées selon les besoins jusqu'à ce que vous obteniez un résultat satisfaisant.

Étape 5 : Ajout d'une piste de souris et d'un effet d'inclinaison 3D

Elementor propose davantage d'effets de parallaxe interactifs, notamment piste de la souris répondre en chantant Inclinaison 3D Effets. Ces effets permettent aux éléments de créer une impression de profondeur en fonction du mouvement de la souris et conviennent aux appareils de bureau.

2. effets de parallaxe sur l'arrière-plan

Étape 1 : Entrer les paramètres de style

Dans Elementor, sélectionnezconteneursAllez à la section type Tab.

Étape 2 : Activer les effets de mouvement sur l'arrière-plan

Peut être réglé individuellement contextes puis allez à la section niveau élevéActiver effet de mouvement peut-être Effets sur la sourispour ajouter un effet de parallaxe à l'image d'arrière-plan. L'effet de mouvement ajuste l'arrière-plan en fonction du défilement, tandis que l'effet de souris rend l'image d'arrière-plan interactive en fonction du mouvement de la souris.

Étape 3 : Ajustement et optimisation de l'effet

Similaire aux effets de parallaxe sur les élémentsIl est possible d'ajuster les performances de l'effet de parallaxe sur différents appareils afin de garantir un affichage fluide sur les téléphones mobiles, les tablettes et les ordinateurs de bureau.

IV. résumé

Il existe plusieurs façons d'ajouter des effets de parallaxe à un site web WordPress, par codage manuel, à l'aide de plugins, Elementor, toutes permettant d'obtenir une impression visuelle de profondeur et de mouvement. Vous trouverez ci-dessous un résumé des avantages et des inconvénients de chaque méthode :

• Codage manuelLe système de codage est adapté aux utilisateurs ayant une expérience du codage, offrant un degré plus élevé de liberté de personnalisation, mais il est complexe à utiliser et convient aux techniciens.
• plug-in (composant logiciel)Le plugin permet d'obtenir des effets de parallaxe rapides, mais il peut nécessiter quelques modifications mineures du code. Le plugin permet d'obtenir rapidement des effets de parallaxe, mais peut nécessiter quelques modifications mineures du code.
• ElementorElementor : La méthode la plus simple et la plus intuitive. Avec Elementor, vous pouvez facilement mettre en œuvre des effets de parallaxe sur les éléments web et les arrière-plans.