Effets de parallaxe

Parallaxe de l’image d’arrière-plan #

Une tendance majeure dans la conception Web est le défilement parallaxe, qui implique que l'image d'arrière-plan se déplace plus lentement vers le contenu de premier plan lorsque vous faites défiler la page. Cet effet de parallaxe peut être appliqué au site Elementor.

Dans ce guide, nous allons vous montrer comment ajouter un effet de parallaxe sur une image d'arrière-plan avec ElementsKit.

Regardez le guide vidéo :

Ou suivez les instructions étape par étape ci-dessous :

Étape=>1 : Assurez-vous que le Parallaxe le module est SUR depuis Tableau de bord ElementsKit MODULES

Étape=>2 : Aller à Éléments=> Rechercher Image=> Faites glisser et déposez le Section images.

Étape=>3 : Ajouter un Image de fond depuis Modifier la section Contenu languette

Étape=>4 : Aller à Onglet Avancé -> Cliquez sur ElementsKit effets-> Sélectionner le type d'effet Option CSS3, Inclinaison, Lors du défilement, Lors du déplacement de la souris à votre propre choix

CSS3 #

  • Étape=>1 : Aller à Onglet Avancé=>Effets ElementsKit=> Type d'effet=> Sélectionnez CSS3=> Allumez le Animation CSS Basculer
  • Sélectionner Effet d'animation depuis Dérouler
  • Modifier Animation Vitesse
  • Animation Nombre d'itérations=> Infini ou non défini
  • Sélectionner Direction des animations
  • Étape=>2 : Effets ElementsKit=> Type d'effet=> Sélectionnez CSS3=> Allumez le Transformation CSS Basculer
  • Traduire
  • Tourner
  • Échelle
  • Fausser
  • Réinitialiser si vous le souhaitez

Inclinaison #

Étape=>1 : Aller à Onglet Avancé=>Effets ElementsKit=> Type d'effet=> Sélectionnez Inclinaison

ON Défilement #

Étape=>1 : Aller à Onglet Avancé=>Effets ElementsKit=> Type d'effet=> Sélectionnez au défilement

Lors du déplacement de la souris #

Étape=>1 : Aller à Onglet Avancé=>Effets ElementsKit=> Type d'effet=> Sélectionnez lors du déplacement de la souris

C'est ainsi que l'effet de parallaxe peut être appliqué à la page ou au site Web Elementor. Apprenez cette méthode simple et accrocheuse pour appliquer la parallaxe dans votre page Elementor.

Quels sont tes sentiments
Mis à jour le 12 février 2024