Nettstedet DayTrip bruker en pen effekt på sidetittelen som forvrenger bakgrunnsbildet med en animert, kornete tekstur. Effekten er subtil, men skaper en støvete, retro stemning.
Effekten er veldig subtil. Du kan se forskjellen hvor effekten er på plass til høyre og deaktivert til venstre:
Vi kan skape den samme rustikke effekten med et enkelt bilde og litt CSS.
Trinn 1: Sette opp ting
Først, la oss sette opp sideoverskriften vår. Vi skal bruke et vanlig mønster der et bakgrunnsbilde tar opp hele plassen.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Her er et eksempel for å komme i gang:
Se Pen RpLKdx av Geoff Graham (@geoffgraham) på CodePen.
Trinn 2: Velge en tekstur
Deretter trenger vi et bilde med en kornete tekstur. Du kan lage dette selv. Subtle Patterns har også en rekke fine alternativer, inkludert denne som vi skal bruke til vår demo. Merk at bildet ikke trenger å være stort. Noe i nærheten av 400pxtorget vil gjøre susen.
Tanken er at vi skal legge den kornete teksturen oppå .page-header. Vi kan bruke :afterpseudo-elementet på, .page-headerså det er ikke nødvendig å lage et annet 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; )Legg merke til at vi plasserte a heightog widthpå pseudo-elementet så vel som a topog leftslik at det faktisk overskrider grensen til sidehode og er sentrert til den. Vi ønsker å gjøre dette slik at det kornete teksturlaget har plass til å bevege seg uten å utsette sidens topplag under. Dette betyr at lag er ordnet mer slik:
Nå har vi en fin stor sidehode med et kornete bilde på toppen:
Se pennen evGvKg av Geoff Graham (@geoffgraham) på CodePen.
Trinn 3: Animering av kornlaget
Det siste vi trenger å gjøre er å animere kornlaget. Dette er effekten vi går etter og gir sideoverskriften den retro, analoge appellen.
DayTrip-nettstedet bruker følgende for å definere nøkkelrammene for animasjon:
@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 er litt vanskelig å visualisere hva den koden betyr, men det beveger i utgangspunktet det øverste kornlaget rundt i et sikksakkmønster. Her er en illustrasjon av hvordan det ser ut i mindre skala:
Nå er alt vi trenger å gjøre å bruke nøkkelbildene for .page-header:afterå se at den trer i kraft. Vi setter animasjonen til å spille i 8 sekunder og løkke uendelig:
.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; )Sette alt sammen
Her er hele utdraget med alle brikkene på plass. Vær oppmerksom på at vi antar bruk av Autoprefixer for alle forhandlerprefiks.
.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.