Du kan kalla det gimmicky, du kan kalla det ögonljus, men parallaxeffekten i webbdesign är här för att stanna. Det är ett element som kommer att ge din webbplats "WOW" -faktorn. Medan effekten har funnits länge, och det finns gott om webbplatser som har implementerat det på sin design, är det fortfarande coolt.

Om du är redo att gå med i rörelsen och lägga till effekten på din WordPress-webbplats, håll dig stillad.

Vad är Parallax?

För de som inte är bekanta med termen definierar ordlistan ordet "parallax" som " den effekt där positionen eller riktningen för ett objekt tycks skilja sig från olika positioner. ”

I webbdesign världen är parallax en teknik där bakgrundsbilden rör sig i en annan hastighet, vanligtvis långsammare än förgrundsbilderna. Syftet är att skapa en djup illusion (faux 3D-effekt) i en 2D-miljö.

Tillämpningen av parallax har funnits från 1980-talet i spelvärlden, men webbdesigners började precis att införliva effekten i stor utsträckning under 2011 med hjälp av HTML5 och CSS3.

Första sökvägen: WordPress-teman

Om du är en WordPress-användare, är det enklaste sättet att få parallax-effekten på din webbplats att använda ett WordPress-tema med den inbyggda effekten. Byt tema och du är klar.

Det finns massor av parallax-färdiga WP-teman där ute, både gratis och betalda. En snabb sökning på Google och i WordPress-temförvaret ger dig fler alternativ som du någonsin kan hantera.

Om du vill testa några av teman, här är några exempel på dem fräscha från förvaret. Eftersom det är omöjligt att testa och jämföra alla tillgängliga parallax-färdiga teman och visa dig bara det bästa, valde dessa uteslutande utifrån subjektiviteten i min personliga visuella smak.

1. Parallax Frame

2. Marvy

3. SimpleShift

4. Eleganto

5. Integral

6. Zeal

7. Juniper

8. Och glöm inte det senaste officiella temat från WordPress, tjugosjuft, stöder också en parallaxrubrik.

Dessa teman har vanligtvis en eller några specifika platshållare för parallaxeffekten, och allt du behöver göra är att ladda upp bakgrundsbilden till dessa platser. Men denna enkelhet är också en nackdel eftersom du har lite utrymme att improvisera.

Varje tema är annorlunda, men du kan vanligtvis anpassa bakgrundsparallaxbilden via menyn "Utseende -> Anpassa" och välj den specifika menyn enligt temainställningarna.

Andra sökvägen: WordPress-plugins

Om du vill tillämpa effekten på de områden du vill ha, måste du använda plugin. Även om numret inte är lika stort som med teman finns det fortfarande många WordPress-parallax-plugins som du kan försöka. Här är några av dem från plugin-arkivet: Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider och Aesop Story Engine.

De flesta av dessa pluginprogram tillåter dig att skapa parallaxelement och infoga dem i inlägg, sidor eller andra stödda områden med hjälp av kortnummer. Det finns också några som skapar elementen direkt i den plats där du vill att parallax ska visas.

Sedan vi har diskuterat Aesop Story Engine, dess parallaxinsättningsförmåga och alla dess funktioner finns i Building Interactive Longform Storytelling Contents på WordPress ebook, så för syftet med den här artikeln, låt oss se på ett annat plugin som ett exempel.

I Parallax Scroll kan du till exempel skapa en ny parallell som liknar att skapa ett nytt inlägg. Redigeringsgränssnittet ser också ut som För att lägga till parallellbakgrundsbilden, använd alternativet "Set featured image". Titel och postinnehåll är valfria.

Det finns många alternativ som du kan tinker med under innehållsrutan, men de är också valfria.

När du har tryckt på "Publicera" -knappen får du en kortnummer. Sätt in den här kortkoden i alla stödda platser (inlägg, sidor, widgets, etc.), och du kommer att ha parallaxeffekten.

Observera att även om du kan justera många saker i alternativen kommer det slutliga resultatet av parallaxen att vara beroende av de teman du använder. Om temat stöder full bredd, kan parallaxelementet dyka upp i sin fulla bredd. Om inte kan du acceptera vad livet har gett dig med öppna armar, eller du kan försöka hacka dig in i ditt föredragna utseende med hjälp av CSS och JavaScript.

Ett litet knep för att lägga till din arsenal: Ingen sa att du inte kunde kombinera temat och plugin. Att använda mer än ett plugin är också lagligt. Du kan till exempel använda Twenty Seventeen för ditt tema och installera Aesop Story Engine plus Parallax Scroll som extra spicing till ditt webrecept.

Nu kan du gå på en parallaxresa och wow dina besökare längs vägen.