Web DayTrip využíva na hlavičku svojej stránky čistý efekt, ktorý skresľuje obrázok na pozadí animovanou zrnitou textúrou. Efekt je jemný, ale vytvára prašnú retro atmosféru.
Efekt je veľmi jemný. Rozdiel vidíte tam, kde je efekt zapnutý vpravo a vypnutý vľavo:
Rovnaký rustikálny efekt môžeme vytvoriť pomocou jedného obrázka a trochy CSS.
Krok 1: Príprava vecí
Najskôr nastavíme hlavičku našej stránky. Použijeme spoločný vzor, kde obrázok na pozadí zaberá celý priestor.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Tu je príklad, ako začať:
Prezrite si pero RpLKdx od Geoffa Grahama (@geoffgraham) na stránkach CodePen.
Krok 2: Výber textúry
Ďalej potrebujeme obrázok so zrnitou textúrou. Môžete si ho vytvoriť sami. Subtle Patterns má tiež množstvo príjemných možností, vrátane tejto, ktorú použijeme pri ukážke. Upozorňujeme, že obraz nemusí byť obrovský. Čosi 400pxurobí niečo v susedstve námestia.
Myšlienka je, že zrnitú textúru prekryjeme .page-header. Môžeme použiť :afterpseudoelement, .page-headertakže nie je potrebné vytvárať ďalší 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; )Všimnite si, že sme umiestnili heighta widthna pseudoelement rovnako ako a topa lefttak, aby skutočne presahoval hranicu hlavičky stránky a bol vycentrovaný k nej. Chceme to urobiť tak, aby vrstva zrnitej textúry mala priestor na pohyb, bez toho aby bola spodná vrstva obnažená. To znamená, že vrstvy sú usporiadané skôr takto:
Teraz máme peknú veľkú hlavičku stránky so zrnitým obrázkom navrchu:
Prezrite si pero evGvKg od Geoffa Grahama (@geoffgraham) na stránkach CodePen.
Krok 3: Animácia zrnitej vrstvy
Posledná vec, ktorú musíme urobiť, je animovať zrnitú vrstvu. Toto je efekt, ktorý sledujeme, a dáva hlavičke stránky retro, analógový vzhľad.
Web DayTrip používa na definovanie kľúčových snímok animácie toto:
@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%) ) )Je dosť ťažké predstaviť si, čo tento kód znamená, ale v zásade ide o pohyb vrchnej zrnitej vrstvy v cik-cak vzore. Tu je ilustrácia toho, čo vyzerá v menšom meradle:
Teraz musíme iba použiť kľúčové snímky, aby .page-header:aftersa prejavila účinnosť. Nastavíme animáciu tak, aby sa hrala 8 sekúnd a nekonečne sa opakovala:
.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; )Dávať to všetko dokopy
Tu je celý úryvok so všetkými kúskami na svojom mieste. Všimnite si, že predpokladáme použitie Autoprefixeru pre všetky prefixy dodávateľov.
.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%) ) )Pozrite si efekt pera s animovaným zrnom od Geoffa Grahama (@geoffgraham) na stránkach CodePen.