Webbplatsen DayTrip använder en snygg effekt på sidhuvudet som förvränger bakgrundsbilden med en animerad, kornig konsistens. Effekten är subtil men skapar en dammig, retro atmosfär.
Effekten är mycket subtil. Du kan se skillnaden där effekten är på plats till höger och inaktiverad till vänster:
Vi kan skapa samma rustika effekt med en enda bild och lite CSS.
Steg 1: Ställa in saker
Låt oss först ställa in vår sidhuvud. Vi ska använda ett vanligt mönster där en bakgrundsbild tar upp hela utrymmet.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Här är ett exempel för att komma igång:
Se Pen RpLKdx av Geoff Graham (@geoffgraham) på CodePen.
Steg 2: Välja en struktur
Därefter behöver vi en bild med en kornig struktur. Du kan skapa detta själv. Subtle Patterns har också ett antal fina alternativ, inklusive den här som vi kommer att använda för vår demo. Observera att bilden inte behöver vara enorm. Något i närheten av 400pxtorget kommer att göra susen.
Tanken är att vi ska lägga den korniga strukturen ovanpå .page-header. Vi kan använda :afterpseudo-elementet på .page-headerså det finns inget behov av att skapa ett annat element.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( /* content is required when using :after */ content: ""; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* Specify a height and width above and beyond the page header for movement */ height: 300%; width: 300%; /* We're using opacity in place of a transparent image */ opacity: 0.3; /* We'll need this when the animation kicks in to hold the position of the texture */ position: fixed; )Observera att vi placerade a heightoch widthpå pseudoelementet liksom a topoch leftså att det faktiskt överskrider sidhuvudets gräns och är centrerat mot det. Vi vill göra detta så att det korniga konsistenslagret har utrymme att röra sig utan att sidhuvudlagret under exponeras. Detta betyder att lager är ordnade mer så här:
Nu har vi en fin stor sidhuvud med en kornig bild ovanpå:
Se pennan evGvKg av Geoff Graham (@geoffgraham) på CodePen.
Steg 3: Animera Grainy Layer
Det sista vi behöver göra är att animera det korniga lagret. Det här är den effekt som vi går efter och ger sidhuvudet det retro, analoga överklagandet.
DayTrip-webbplatsen använder följande för att definiera nyckelramarna för animering:
@keyframes grain ( 0%, 100% ( transform:translate(0, 0) ) 10% ( transform:translate(-5%, -10%) ) 20% ( transform:translate(-15%, 5%) ) 30% ( transform:translate(7%, -25%) ) 40% ( transform:translate(-5%, 25%) ) 50% ( transform:translate(-15%, 10%) ) 60% ( transform:translate(15%, 0%) ) 70% ( transform:translate(0%, 15%) ) 80% ( transform:translate(3%, 35%) ) 90% ( transform:translate(-10%, 10%) ) )Det är ganska svårt att visualisera vad den koden betyder, men det flyttar i princip det övre korniga lagret runt i ett sicksackmönster. Här är en illustration av hur det ser ut i mindre skala:
Nu är allt vi behöver göra att använda nyckelrutorna för .page-header:afteratt se att det träder i kraft. Vi ställer in animeringen för att spela i 8 sekunder och slinga oändligt:
.page-header:after ( /* content is required when using :after */ content: ""; /* The animation */ animation: grain 8s steps(10) infinite; /* The grainy image */ background-image: url("/path/to/grainy/image.jpg.webp"); /* Specify a height and width above and beyond the page header for movement */ height: 300%; width: 300%; /* We're using opacity in place of a transparent image */ opacity: 0.3; /* We'll need this when the animation kicks in to hold the position of the texture */ position: fixed; )Få alltid att falla på plats
Här är hela utdraget med alla bitarna på plats. Observera att vi antar att Autoprefixer används för alla leverantörsprefix.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); ) .page-header:after ( animation: grain 8s steps(10) infinite; background-image: url("/path/to/grainy/image.jpg.webp"); content: ""; height: 300%; left: -50%; opacity: 0.3; position: fixed; top: -100%; width: 300%; ) @keyframes grain ( 0%, 100% ( transform:translate(0, 0) ) 10% ( transform:translate(-5%, -10%) ) 20% ( transform:translate(-15%, 5%) ) 30% ( transform:translate(7%, -25%) ) 40% ( transform:translate(-5%, 25%) ) 50% ( transform:translate(-15%, 10%) ) 60% ( transform:translate(15%, 0%) ) 70% ( transform:translate(0%, 15%) ) 80% ( transform:translate(3%, 35%) ) 90% ( transform:translate(-10%, 10%) ) )Se Pen Animated Grainy Effect av Geoff Graham (@geoffgraham) på CodePen.