Web stranica DayTrip koristi uredan efekt na zaglavlju svoje stranice koji iskrivljuje pozadinsku sliku animiranom, zrnastom teksturom. Učinak je suptilan, ali stvara prašnjavu, retro atmosferu.
Učinak je vrlo suptilan. Možete vidjeti razliku u tome gdje je efekt na desnoj, a onemogućen na lijevoj strani:
Možemo stvoriti isti rustikalni efekt s jednom slikom i malo CSS-a.
Korak 1: Postavljanje stvari
Prvo, postavimo zaglavlje naše stranice. Upotrijebit ćemo uobičajeni obrazac gdje pozadinska slika zauzima cijeli prostor.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Evo primjera za početak:
Pogledajte olovku RpLKdx, Geoff Graham (@geoffgraham) na CodePen.
Korak 2: Odabir teksture
Dalje, trebamo sliku zrnaste teksture. Možete to sami stvoriti. Suptilni uzorci također imaju niz lijepih opcija, uključujući ovu koju ćemo koristiti za našu demonstraciju. Imajte na umu da slika ne mora biti velika. Nešto u susjedstvu 400pxtrga učinit će trik.
Ideja je da prekrivamo zrnastu teksturu na vrhu .page-header. :afterPseudo-element možemo koristiti, .page-headerpa nema potrebe za izradom drugog elementa.
.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; )Imajte na umu da smo postavili a heighti widthna pseudo-element kao i a topi lefttako da zapravo prelazi granicu zaglavlja stranice i centrira na njega. To želimo učiniti tako da se zrnasti teksturni sloj ima prostora za kretanje bez izlaganja sloja zaglavlja stranice ispod. To znači da su slojevi raspoređeni više ovako:
Sada imamo lijepo zaglavlje velike stranice sa zrnastom slikom na vrhu:
Pogledajte Pen evGvKg Geffa Grahama (@geoffgraham) na CodePenu.
Korak 3: Životinja zrnatog sloja
Posljednje što trebamo učiniti je animirati zrnasti sloj. To je učinak za kojim idemo i zaglavlju stranice daje onu retro, analognu privlačnost.
Web mjesto DayTrip koristi sljedeće za definiranje ključnih okvira za animaciju:
@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%) ) )Nekako je teško vizualizirati što taj kod znači, ali u osnovi pomiče gornji zrnasti sloj u cik-cak obliku. Evo ilustracije kako to izgleda u manjem mjerilu:
Sada sve što moramo učiniti je primijeniti ključne okvire kako .page-header:afterbismo vidjeli kako on stupa na snagu. Postavit ćemo animaciju na reprodukciju 8 sekundi i beskonačno petlje:
.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; )Sve to zajedno
Evo cijelog isječka sa svim dijelovima na mjestu. Imajte na umu da pretpostavljamo upotrebu Autoprefixer-a za sve prefikse dobavljača.
.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%) ) )Pogledajte olovku Animirani zrnati efekt Geffa Grahama (@geoffgraham) na CodePenu.