Hvordan legge inn bakgrunnsbilde med parallax effekt?

Hvordan legge inn bakgrunnsbilde med parallax effekt?

Aller først, hva er parallaxeffekt? Parallax-rulling er en teknikk i datagrafikk der bakgrunnsbilder beveger seg langs kameraet saktere enn forgrunnen, og skaper en illusjon av dybde i en 2D-scene og gir følelsen av fordypning i den virtuelle opplevelsen.(Kilde: Wikipedia).

Ble du noe klokere? Det er lettere å vise i praksis 🙂 Her er et typisk eksempel. Som du ser så beveger bakgrunnsbildet seg ikke i samme hastighet som teksten i forgrunnen. Dette er altså parallax:

Møt Frk. Dijon

Joies de Vivré

Her har jeg brukt Kioken Blocks, en plugin jeg ofte bruker. Jeg starter med en «Container Row» blokk, legger til bakgrunnsbilde og aktiverer effekten under «Apply Parallax Effect». Det er enkelt å legge inn selv, og kan brukes hvor som helst på sider og innlegg, selv om effekten kanskje er mest brukt på forsider.

Start med å legge til en «Container Row».

  1. Velg ønsket bredde.
  2. Legg til bakgrunnsbilde.
  3. Velg ønsket antall kolonner.

Når du har lagt til tekst, eller det du måtte ønske å ha over bakgrunnsbildet, så justerer du padding og aktiverer parallax.

Marker din «Container Row»(klikk i ytterkant eller bruk navigeringsverktøy for å finne riktig sted).

Juster padding til du blir fornøyd med utseendet.

Velg så parallax effekt

Scroll deg videre nedover, fortsatt med «Container Row» aktiv, til du kommer til «Background».

Her må du gjerne prøve deg fram med bl.a. posisjonering av bildet, og ulike «Blend Modes».

Men det viktigste er at du aktiverer «Apply Parallax Effect» valget. Du kan også prøve deg fram med innstillingen for «Parallax Movement Speed» til du får en effekt du er fornøyd med.

NB! Du må ha såpass mye innhold på siden at det faktisk er mulig å scrolle nedover på siden. Hvis du KUN legger til et bakgrunnsbilde, og ikke noe mer innhold, så vil du høyst sannsynlig ikke ha nok innhold på siden til å få noen effekt når du scroller.

Bruker du fortsatt den klassiske editoren? Da vil jeg på det sterkeste anbefale å ta i bruk blokkredigering. Det gir så mange flere muligheter til å presentere innhold på flere måter. Usikker på hvordan du gjør det? Les denne bloggen!

Skriv en kommentar

Din e-postadresse vil ikke bli publisert.

Dette nettstedet bruker Akismet for å redusere spam. Lær om hvordan dine kommentar-data prosesseres.

Ikke gå glipp av nyheter fra WP Skolen

Du vil motta e-post fra oss når vi har nye blogginnlegg, nyheter eller tilbud som vi tror vil være av interesse for deg. Du kan melde deg av når du vil!

Tilbakestill passord

Gjenopprett passordet ditt

En link for å gjenopprette passord vil bli sendt deg på e-post.

Tilbake

Your Cart