Bakgrundsbild Parallax #

En stor trend inom webbdesign är Parallax-rullning, vilket innebär att bakgrundsbilden rör sig i en långsammare takt till förgrundsinnehållet när du rullar ner på sidan. Denna parallaxeffekt kan appliceras på Elementor-webbplatsen.

I den här guiden visar vi hur du kan lägga till Parallax-effekt på en bakgrundsbild med ElementsKit.

Se videoguiden:

Eller följ steg-för-steg-instruktionerna nedan:

Steg=>1: Se till att Parallax modul är PÅ från instrumentbräda → ElementsKit → MODULER

Steg=>2: Gå till Element=> Sök efter Bild=> Dra och släpp Bildavsnitt.

Steg=>3: Lägg till en Bakgrundsbild från Redigera avsnitt → Innehåll flik

Steg=>4: Gå till Fliken Avancerat -> Klicka på ElementsKit effekter-> Välj effekttyp CSS3, Tilt, Vid rullning, På Mouse Move alternativ efter eget val

CSS3 #

• Steg=>1: Gå till Fliken Avancerat=>ElementsKit-effekter=> Effekttyp=> Välj CSS3=> Slå på CSS-animering Växla

• Välj Animationseffekt från Falla ner

• Ändra Animation Fart
• Animation Antal iterationer=> Oändlig eller avstängd

• Välj Animationsriktning

• Steg=>2: ElementsKit-effekter=> Effekttyp=> Välj CSS3=> Slå på CSS-transformation Växla

• Översätt
• Rotera
• Skala
• Skev
• Återställ om så önskas

Luta #

Steg=>1: Gå till Fliken Avancerat=>ElementsKit-effekter=> Effekttyp=> Välj Luta

PÅ Scrolla #

Steg=>1: Gå till Fliken Avancerat=>ElementsKit-effekter=> Effekttyp=> Välj På Scroll

På musrörelse #

Steg=>1: Gå till Fliken Avancerat=>ElementsKit-effekter=> Effekttyp=> Välj Vid musrörelse

Det är så parallaxeffekt kan appliceras på Elementors sida eller webbplats. Lär dig denna enkla och catchy metod för att applicera parallax på din Elementor-sida.