Site-ul web DayTrip folosește un efect îngrijit pe antetul paginii, care distorsionează imaginea de fundal cu o textură animată, granulată. Efectul este subtil, dar creează o atmosferă prăfuită și retro.
Efectul este foarte subtil. Puteți vedea diferența în care efectul este în poziție în dreapta și dezactivat în stânga:
Putem crea același efect rustic cu o singură imagine și un pic de CSS.
Pasul 1: Configurarea lucrurilor
Mai întâi, să configurăm antetul paginii noastre. Vom folosi un model comun în care o imagine de fundal ocupă întregul spațiu.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Iată un exemplu pentru a ne începe:
Vezi Pen RpLKdx de Geoff Graham (@geoffgraham) pe CodePen.
Pasul 2: Selectarea unei texturi
Apoi, avem nevoie de o imagine cu o textură granulată. Puteți crea acest lucru singur. Subtle Patterns are, de asemenea, o serie de opțiuni frumoase, inclusiv pe aceasta pe care o vom folosi pentru demo-ul nostru. Rețineți că imaginea nu trebuie să fie imensă. Ceva din cartierul 400pxpătratului va face truc.
Ideea este că vom suprapune textura granulată deasupra .page-header. Putem folosi :afterpseudo-elementul .page-headerastfel încât nu este nevoie să creăm un alt 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; )Rețineți că am plasat a heightși widthpe pseudo-element, precum și a topși leftastfel încât acesta să depășească de fapt limita antetului paginii și să fie centrat pe acesta. Vrem să facem acest lucru astfel încât stratul de textură granulată să aibă spațiu pentru a se deplasa fără a expune stratul de antet al paginii dedesubt. Acest lucru înseamnă că straturile sunt aranjate mai mult astfel:
Acum avem un antet de pagină mare frumos, cu o imagine granulată deasupra:
Vedeți Pen evGvKg de Geoff Graham (@geoffgraham) pe CodePen.
Pasul 3: Animarea stratului Grainy Layer
Ultimul lucru pe care trebuie să-l facem este să animăm stratul granulat. Acesta este efectul pe care îl urmărim și oferă antetului de pagină acel apel retro și analogic.
Site-ul DayTrip folosește următoarele pentru a defini cadrele cheie de animație:
@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%) ) )Este destul de greu să vizualizezi ce înseamnă acel cod, dar practic mișcă stratul superior granulat în jurul unui model în zig-zag. Iată o ilustrare a aspectului la o scară mai mică:
Acum tot ce trebuie să facem este să aplicăm cadrele cheie pentru .page-header:aftera vedea efectul acestuia. Vom seta animația să se joace timp de 8 secunde și să o buclăm la infinit:
.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; )Punând totul împreună
Iată fragmentul complet cu toate piesele la locul lor. Rețineți că presupunem utilizarea Autoprefixer pentru prefixarea tuturor furnizorilor.
.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%) ) )Vedeți Pen Animated Grainy Effect de Geoff Graham (@geoffgraham) pe CodePen.