De DayTrip-website gebruikt een leuk effect op de paginakop die de achtergrondafbeelding vervormt met een geanimeerde, korrelige textuur. Het effect is subtiel maar zorgt voor een stoffige, retro sfeer.
Het effect is heel subtiel. U kunt het verschil zien waar het effect zich aan de rechterkant bevindt en aan de linkerkant is uitgeschakeld:
We kunnen hetzelfde rustieke effect creëren met een enkele afbeelding en een klein beetje CSS.
Stap 1: dingen opzetten
Laten we eerst de koptekst van onze pagina instellen. We gaan een algemeen patroon gebruiken waarbij een achtergrondafbeelding de hele ruimte in beslag neemt.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Hier is een voorbeeld om ons op weg te helpen:
Zie de Pen RpLKdx door Geoff Graham (@geoffgraham) op CodePen.
Stap 2: een textuur selecteren
Vervolgens hebben we een afbeelding nodig met een korrelige textuur. Deze kunt u zelf aanmaken. Subtle Patterns heeft ook een aantal leuke opties, waaronder deze die we voor onze demo gaan gebruiken. Merk op dat de afbeelding niet enorm hoeft te zijn. Iets in de buurt van een 400pxplein is voldoende.
Het idee is dat we de korrelige textuur over de .page-header. We kunnen het :afterpseudo-element gebruiken, .page-headerdus het is niet nodig om een ander element te maken.
.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; )Merk op dat we a heighten widthop het pseudo-element hebben geplaatst , evenals een topen leftzodat het daadwerkelijk de grens van de paginakop overschrijdt en erop gecentreerd is. We willen dit doen zodat de korrelige textuurlaag ruimte heeft om te bewegen zonder de onderliggende paginakoplaag bloot te leggen. Dit betekent dat de lagen meer als volgt zijn gerangschikt:
Nu hebben we een mooie grote paginakop met een korrelige afbeelding bovenaan:
Zie de Pen evGvKg door Geoff Graham (@geoffgraham) op CodePen.
Stap 3: de korrelige laag animeren
Het laatste dat we moeten doen, is de korrelige laag animeren. Dit is het effect dat we nastreven en geeft de paginakop die retro, analoge aantrekkingskracht.
De DayTrip-site gebruikt het volgende om de animatiehoofdframes te definiëren:
@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%) ) )Het is een beetje moeilijk om te visualiseren wat die code betekent, maar het beweegt in feite de bovenste korrelige laag in een zigzagpatroon. Hier is een illustratie van hoe dat eruit ziet op kleinere schaal:
Nu hoeven we alleen nog maar de keyframes toe .page-header:afterte passen om het effect te zien. We zullen de animatie instellen om 8 seconden af te spelen en oneindig te herhalen:
.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; )Alles samenvoegen
Hier is het volledige fragment met alle stukjes op hun plaats. Merk op dat we uitgaan van het gebruik van Autoprefixer voor alle prefixen van leveranciers.
.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%) ) )Zie het Pen Animated Grainy Effect van Geoff Graham (@geoffgraham) op CodePen.