Parallax scrolling

"Parallax scrolling" är en term som används för att beskriva att bakgrunden/bakgrunderna rör sig i en annan hastighet när man scrollar en webbsida. Detta ger en känsla av djup i en tvådimensionell sida.

Base Layer 1
Background Layer
Foreground Layer
Base Layer 2
Base Layer 3
Background Layer
Deep Background Layer

Parallax med bara CSS

Denna sida använder ett exempel gjort av Keith Clarke, vilket ni kan finna här:

Jag har även sparat ner en lite tweakad variant lokalt ifall ovanstående länk inte funkar. Hämta den här

Sidan är helt och håller uppbyggd med CSS så det är den delen man behöver hålla lite koll på.

Det finns en debug-funktion med vilken man kan se hur de olika boxarna förhåller sig till varandra i 3D. Det är en väldigt bra funktion i alla lägen - främst när man jobbar med

transparens. På just denna sida finns funktionen uppe till höger. Klicka i "Debug" och kolla.

När man har byggt färdigt kan man ta bort funktionen och då är det två saker man ska ta bort:

Rad 64-88 som innehåller CSS för funktionen. Rad 179-181 som innehåller div:en för knappen.

Att tänka på när man använder denna mall

Det här är bara tips - inte regler.

  • Höjden på delarna är fast - om man vill ha in mer text får man tweaka en del.
  • En bra idé är att använda centrerade bakgrundsbilder - det blir snyggast då. Och om man använder samma CSS till olika skärmupplösningar hamnar det viktigaste i bilden i mitten. Använd t ex:

    background-position: center;

Skrollr

Skrollr är ett javascript-framework gjort just för parallax scrolling.

Base Layer 4
group6 Background Layer
Base Layer 5
About da sajt