DayTrip-webstedet bruger en pæn effekt på sin sidehoved, der forvrænger baggrundsbilledet med en animeret, kornet struktur. Effekten er subtil, men skaber en støvet, retro stemning.
Effekten er meget subtil. Du kan se forskellen, hvor effekten er på plads til højre og deaktiveret til venstre:
Vi kan skabe den samme rustikke effekt med et enkelt billede og en lille smule CSS.
Trin 1: Opsætning af ting
Lad os først oprette vores sidehoved. Vi skal bruge et fælles mønster, hvor et baggrundsbillede tager hele rummet.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Her er et eksempel for at komme i gang:
Se Pen RpLKdx af Geoff Graham (@geoffgraham) på CodePen.
Trin 2: Valg af en struktur
Dernæst har vi brug for et billede med en kornet struktur til det. Du kan selv oprette dette. Subtle Patterns har også en række gode muligheder, herunder denne, som vi bruger til vores demo. Bemærk, at billedet ikke behøver at være stort. Noget i nærheden af 400pxtorvet vil gøre tricket.
Ideen er, at vi lægger den kornede tekstur oven på .page-header. Vi kan bruge :afterpseudo-elementet på, .page-headerså der er ikke behov for at oprette et andet 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; )Bemærk, at vi placerede a heightog widthpå pseudo-elementet såvel som a topog leftsåledes at det faktisk overstiger grænsen for sidehovedet og er centreret om det. Vi ønsker at gøre dette, så det kornede teksturlag har plads til at bevæge sig uden at udsætte sidehovedlaget nedenunder. Dette betyder, at lag er arrangeret mere som dette:
Nu har vi en dejlig stor sidehoved med et kornet billede ovenpå:
Se pennen evGvKg af Geoff Graham (@geoffgraham) på CodePen.
Trin 3: Animering af kornlaget
Den sidste ting, vi skal gøre, er at animere det kornede lag. Dette er den effekt, vi går efter, og giver sidehovedet den retro, analoge appel.
DayTrip-webstedet bruger følgende til at definere animationsnøglerammerne:
@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 lidt svært at visualisere, hvad denne kode betyder, men det flytter dybest set det øverste kornlag rundt i et zig-zag-mønster. Her er en illustration af, hvordan det ser ud i mindre skala:
Nu er alt, hvad vi skal gøre, at anvende nøglerammerne for .page-header:afterat se det træde i kraft. Vi indstiller animationen til at spille i 8 sekunder og løkke uendeligt:
.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; )Samler det hele
Her er det fulde uddrag med alle brikkerne på plads. Bemærk, at vi antager brugen af Autoprefixer til alle forhandlerpræfikser.
.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 af Geoff Graham (@geoffgraham) på CodePen.