Hur du skapar parallaxeffekt med ren CSS utan JavaScript

Du kan bygga en parallaxeffekt med ren CSS på två sätt: den klassiska `background-attachment: fixed` eller den moderna `animation-timeline: scroll()`. Den första fungerar i alla webbläsare men ger bara en grundläggande effekt. Den andra är scroll-driven, mycket smidigare och kräver ingen JavaScript alls, men du behöver tänka på äldre webbläsare och mobil.

Parallaxeffekten är illusionen som uppstår när bakgrunden scrollar långsammare än förgrunden. Ögat tolkar hastighetsskillnaden som djup. Det är samma princip som när du tittar ut genom ett tågfönster: berg i fjärran rör sig knappt medan stängselstolparna intill spåret rusar förbi.

Den klassiska metoden bygger på background-attachment

”`css

.parallax {

background-image: url(”berg.jpg”);

background-attachment: fixed;

background-position: center;

background-size: cover;

min-height: 500px;

}

”`

Det är hela tricket. Egenskapen `background-attachment: fixed` låser bakgrundsbilden mot själva fönstret istället för mot elementet. När du scrollar står bilden still medan innehållet glider förbi, och hjärnan översätter det till djup.

För att procentbaserad höjd ska fungera måste du sätta `height: 100%` på både `` och ``. Glömmer du det får containern noll höjd och bilden syns inte.

Nackdelen är att den här metoden i princip inte fungerar på iOS Safari, och Google PageSpeed klagar gärna på den. Effekten är också ganska grov. Du får en bild som står still, inte en finkalibrerad rörelse mellan flera lager.

Scroll-driven animation är det moderna sättet

Den intressanta nyheten är `animation-timeline: scroll()`. Istället för att tiden driver animationen är det din scrollposition som gör det. Scrollar du halvvägs ner är animationen halvfärdig. Scrollar du tillbaka går den baklänges.

”`css

@keyframes parallax {

to {

transform: translateY(-30%);

}

}

.bakgrund {

animation: parallax linear;

animation-timeline: scroll();

}

”`

Här flyttar sig `.bakgrund` uppåt allteftersom sidan scrollar, och `linear` ser till att rörelsen följer scrollen exakt. Vill du att olika lager ska röra sig olika snabbt ger du dem olika `translateY`-värden. Ett lager som flyttar sig `-10%` upplevs som långt borta. Ett som flyttar sig `-50%` känns nära.

Det fina är att allt körs på kompositortråden i webbläsaren, vilket gör det betydligt mjukare än gammaldags JavaScript-lösningar som lyssnar på scroll-event. MDN:s dokumentation om scroll-driven animation timelines förklarar skillnaden mellan `scroll()` och den mer precisa `view()`, som triggar animationen utifrån när ett element kommer in i synfältet.

Tre lager ger den övertygande djupkänslan

En enda bild som står still räcker långt, men den riktiga 2.5D-känslan kommer först när du staplar flera lager som rör sig i olika takt. Principen är enkel: ju längre bort något ska kännas, desto långsammare ska det röra sig.

• Bakgrundslager, himmel eller fjärran berg. Rör sig minst, ungefär `-10%`. Det här ger djupet.
• Mellanlager, träd, byggnader, dimma. Rör sig medel, runt `-30%`. Skapar övergången mellan nära och långt.
• Förgrundslager, text, knappar, det användaren faktiskt ska läsa. Rör sig normalt eller står still.

Stapla dem med `position: absolute` inuti en container med `position: relative`, och styr djupordningen med `z-index`. Det är samma tankesätt som i CSS Grid jämfört med Flexbox, du bestämmer hur element förhåller sig till varandra i rummet, fast här lägger du till en tredje dimension.

Mobilen är fortfarande problemet

Parallax fungerar inte konsekvent på smartphones. `background-attachment: fixed` kraschar effekten på de flesta mobila webbläsare, och tunga scroll-animationer kan dra ner bildfrekvensen så att hela sidan känns hackig. Många utvecklare väljer därför att stänga av effekten helt på mobil.

”`css

@media (max-width: 768px) {

.bakgrund {

animation: none;

background-attachment: scroll;

}

}

”`

Det här är inte att ge upp. En statisk, snabb bild på mobilen slår en ryckig parallaxeffekt varje gång. Tänk på det som progressiv förbättring: grundsidan fungerar för alla, finliret läggs på där enheten klarar det. Vill du läsa mer om hur sidor anpassar sig efter skärm finns en genomgång av responsiv webbdesign.

Glöm inte användare som blir illamående av rörelse

Kraftiga parallaxeffekter kan utlösa rörelseillamående hos vissa besökare, ungefär som åksjuka. Webbläsaren har en inställning för det, och du bör respektera den.

”`css

@media (prefers-reduced-motion: reduce) {

.bakgrund {

animation: none;

}

}

”`

Med `prefers-reduced-motion` läser du av om användaren har bett operativsystemet om mindre rörelse. Stänger du av animationen för dem är det inte en kompromiss på designen, utan ren tillgänglighet. Chromes guide till scroll-driven animations tar upp samma princip och visar hur du bygger animationer som degraderar snyggt.

När parallax är värt besväret

Effekten tjänar ett syfte på rätt plats och stör på fel. Den passar landningssidor där du vill leda blicken mot en knapp, långa textsidor som behöver andningspaus, och portfolios som ska kännas påkostade.

Den passar inte en informationstät sida där folk söker svar snabbt. Då blir rörelsen bara brus mellan dem och det de letar efter.

Regeln är subtilitet. En diskret hastighetsskillnad som besökaren knappt registrerar medvetet gör jobbet. En bombastisk effekt där allt flyger åt olika håll imponerar i tre sekunder och irriterar i de följande trettio. Mindre rörelse, bättre resultat.

FAQ

Fungerar CSS-parallax på mobil?

Inte tillförlitligt. `background-attachment: fixed` fungerar inte på iOS Safari och de flesta mobila webbläsare, och tunga scroll-animationer kan göra sidan hackig. Det vanligaste är att stänga av effekten på mobil med en media query och visa en statisk bild istället.

Behöver jag JavaScript för en parallaxeffekt?

Nej. Både `background-attachment: fixed` och `animation-timeline: scroll()` skapar parallax helt utan JavaScript. Den moderna scroll-driven metoden ger dessutom mjukare resultat än de äldre JavaScript-lösningar som lyssnade på scroll-event.

Vad är skillnaden mellan scroll() och view()?

`scroll()` kopplar animationen till hur långt hela sidan har scrollats. `view()` kopplar den istället till när ett specifikt element kommer in i synfältet, vilket är mer precist för att animera enskilda sektioner när de dyker upp.

Varför syns inte min bakgrundsbild?

Vanligaste orsaken är att höjden saknas. För procentbaserad höjd måste du sätta `height: 100%` på både `` och ``, annars får containern noll höjd och bilden får ingen yta att visas på.

Vilka webbläsare stöder animation-timeline scroll()

Inte alla äldre versioner. Stödet är bra i moderna webbläsare men saknas i en del äldre. Bygg därför så att sidan fungerar utan effekten och lägg parallaxen som en förbättring ovanpå en fungerande grundlayout.

Kan parallax skada sidans prestanda?

Ja, om den görs slarvigt. Ooptimerade bilder och tunga animationer drar ner bildfrekvensen, och `background-attachment: fixed` får ofta kritik i Google PageSpeed. Komprimera bilderna, håll animationerna enkla och testa på flera enheter innan du publicerar.