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».
- Velg ønsket bredde.
- Legg til bakgrunnsbilde.
- 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.
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!
