Du kan kalle det gimmicky, du kan kalle det øye snus, men parallax effekten i webdesign er her for å bli. Det er ett element som vil gi nettstedet ditt "WOW" -faktoren. Mens effekten har eksistert i noen tid, og det er mange nettsteder som har implementert det på design, er det fortsatt kult.

Hvis du er klar til å bli med på bevegelsen og legge til effekten på WordPress-nettstedet ditt, hold deg innstilt.

Hva er Parallax?

For de som ikke er kjent med begrepet, definerer ordboken ordet "parallax" som " effekten der posisjonen eller retningen til en gjenstand ser ut til å variere når den ses fra forskjellige posisjoner. ”

I webdesignarkivet er parallax en teknikk hvor bakgrunnsbildene beveger seg med en annen hastighet, vanligvis langsommere enn forgrunnsbildene. Hensikten er å skape en illusjon av dybde (faux 3D-effekt) i et 2D-miljø.

Applikasjonen av parallax har eksistert fra 1980-tallet i spillverdenen, men webdesignere begynte å innlemme effekten i 2011 med HTML5 og CSS3.

Første vei: WordPress Temaer

Hvis du er en WordPress-bruker, er den enkleste måten å få parallax-effekten på nettstedet ditt, å bruke et WordPress-tema med effekten som er bygd inn. Bytt tema og du er ferdig.

Det er tonn parallax-klare WP-temaer der ute, både gratis og betalt. Et raskt søk på Google og i WordPress-temaarkivet gir deg flere alternativer som du noen gang kan håndtere.

Hvis du vil teste noen av temaene, er det noen få eksempler på dem friske fra depotet. Siden det er umulig å teste og sammenligne alle tilgjengelige parallax-klare temaer og vise deg bare det beste, ble disse valgt utelukkende basert på subjektiviteten til min personlige visuelle smak.

1. Parallax Frame

2. Marvy

3. SimpleShift

4. Eleganto

5. Integral

6. Zeal

7. Juniper

8. Og ikke glem det siste offisielle temaet fra WordPress, Twenty Seventeen, støtter også en parallax header.

Disse temaene har vanligvis en eller flere spesifikke plassholdere for parallax-effekten, og alt du trenger å gjøre er å laste opp bakgrunnsbildet til disse stedene. Men denne enkelheten er også en ulempe fordi du har lite plass til å improvisere.

Hvert tema er annerledes, men du kan vanligvis tilpasse bakgrunnsparallaksbildet via menyen "Utseende -> Tilpass" og velg den spesifikke menyen i henhold til temainnstillingene.

Andre bane: WordPress-plugin

Hvis du vil bruke effekten til de områdene du ønsker, må du bruke plugins. Selv om tallet ikke er så stort som med temaene, er det fortsatt mange WordPress-parallax-plugins som du kan prøve. Her er noen av dem fra plugin repository: Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider og Aesop Story Engine.

De fleste av disse pluginene lar deg lage parallaxelementer og sette dem inn i innlegg, sider eller andre støttede områder ved hjelp av kortkoder. Det er også noen som lager elementene direkte på stedet der parallaxen skal vises.

Siden vi har diskutert Aesop Story Engine, sin parallell innsetting evne, og alle dens funksjoner er i Building Interactive Longform Storytelling innhold på WordPress eBok, så for formålet med denne artikkelen, la oss se på et annet plugin som et eksempel.

I Parallax Scroll kan du for eksempel lage et nytt parallax som ligner på å opprette et nytt innlegg. Redigeringsgrensesnittet ser også ut som det samme. For å legge til parallell bakgrunnsbilde, bruk alternativet "Set featured image". Tittel og innlegg innhold er valgfritt.

Det er mange alternativer du kan tinker med under innholdsruten, men de er også valgfrie.

Etter å ha trykket på "Publiser" -knappen, vil du få en kortkode. Sett inn denne koden til et hvilket som helst støttet sted (innlegg, sider, widgets, etc.), og du vil ha parallax-effekten.

Merk at selv om du kan justere mange ting i alternativene, vil det endelige resultatet av parallaxen være avhengig av temaene du bruker. Hvis temaet støtter full bredde, kan parallaxelementet vises i full bredde herlighet. Hvis ikke, kan du akseptere hva livet har gitt deg med åpne armer, eller du kan prøve å hakke deg inn i ditt foretrukne utseende ved hjelp av CSS og JavaScript.

Et lite triks for å legge til arsenalen din: Ingen sa at du ikke kunne kombinere temaet og pluginet. Det er også lovlig å bruke mer enn ett plugin. Du kan for eksempel bruke Twenty Seventeen for temaet ditt og installere Aesop Story Engine plus Parallax Scroll som ekstra spicing til weboppskriften din.

Nå kan du gå på parallell reise og wow dine besøkende underveis.