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.
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.