Web DayTrip používá na záhlaví stránky čistý efekt, který deformuje obrázek na pozadí animovanou zrnitou strukturou. Efekt je jemný, ale vytváří prašnou retro atmosféru.
Efekt je velmi jemný. Rozdíl vidíte, kde je efekt na místě vpravo a deaktivován vlevo:
Můžeme vytvořit stejný rustikální efekt s jediným obrázkem a trochou CSS.
Krok 1: Nastavení věcí
Nejprve nastavíme záhlaví naší stránky. Použijeme společný vzor, kde obrázek na pozadí zabírá celý prostor.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Pro začátek uvádíme příklad:
Podívejte se na Pen RpLKdx od Geoffa Grahama (@geoffgraham) na CodePen.
Krok 2: Výběr textury
Dále potřebujeme obrázek se zrnitou strukturou. Můžete to vytvořit sami. Subtle Patterns má také řadu pěkných možností, včetně této, kterou použijeme pro naši ukázku. Všimněte si, že obraz nemusí být obrovský. Něco v okolí 400pxnáměstí to udělá.
Myšlenka je, že zrnitou strukturu překryjeme .page-header. Můžeme použít :afterpseudoelement, .page-headertakže není třeba vytvářet další 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šimněte si, že jsme umístili heighta widthna pseudoelement stejně jako a topa lefttak, aby ve skutečnosti přesahoval hranici záhlaví stránky a byl na něj vycentrován. Chceme to udělat tak, aby vrstva zrnité textury měla prostor pro pohyb, aniž by byla vystavena vrstva záhlaví stránky pod ní. To znamená, že vrstvy jsou uspořádány spíše takto:
Nyní máme pěknou velkou záhlaví stránky se zrnitým obrázkem nahoře:
Podívejte se na pero evGvKg od Geoffa Grahama (@geoffgraham) na CodePen.
Krok 3: Animace zrnité vrstvy
Poslední věcí, kterou musíme udělat, je animovat zrnitou vrstvu. Toto je účinek, který sledujeme, a dává hlavičce stránky retro, analogickou přitažlivost.
Web DayTrip používá k definování klíčových snímků animace následující:
@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 trochu těžké si představit, co tento kód znamená, ale je to v podstatě pohyb horní zrnité vrstvy v klikatém vzoru. Zde je ukázka toho, co vypadá v menším měřítku:
Nyní vše, co musíme udělat, je použít klíčové snímky, aby .page-header:afterse projevily. Nastavíme animaci, aby se hrála po dobu 8 sekund a nekonečně smyčka:
.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áme to dohromady
Tady je celý úryvek se všemi kousky na místě. Všimněte si, že předpokládáme použití Autoprefixeru pro všechny prefixy dodavatelů.
.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%) ) )Podívejte se na efekt animovaného zrnitého pera od Geoffa Grahama (@geoffgraham) na CodePen.