Il sito Web DayTrip utilizza un effetto preciso sull'intestazione della pagina che distorce l'immagine di sfondo con una trama animata e granulosa. L'effetto è sottile ma crea un'atmosfera polverosa e retrò.
L'effetto è molto sottile. Puoi vedere la differenza dove l'effetto è in atto a destra e disabilitato a sinistra:
Possiamo creare lo stesso effetto rustico con una singola immagine e un po 'di CSS.
Passaggio 1: impostazione delle cose
Per prima cosa, configuriamo l'intestazione della nostra pagina. Useremo uno schema comune in cui un'immagine di sfondo occupa l'intero spazio.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Ecco un esempio per iniziare:
Guarda la Pen RpLKdx di Geoff Graham (@geoffgraham) su CodePen.
Passaggio 2: selezione di una trama
Successivamente, abbiamo bisogno di un'immagine con una trama granulosa. Puoi crearlo tu stesso. Subtle Patterns ha anche una serie di belle opzioni, inclusa questa che useremo per la nostra demo. Nota che l'immagine non deve essere enorme. Qualcosa nelle vicinanze della 400pxpiazza farà il trucco.
L'idea è che sovrapporremo la trama granulosa sopra il file .page-header. Possiamo usare lo :afterpseudo-elemento su .page-headerquindi non è necessario creare un altro elemento.
.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; )Si noti che abbiamo posizionato un heighte widthsullo pseudo-elemento oltre a un tope in leftmodo che superi effettivamente il limite dell'intestazione della pagina e sia centrato su di esso. Vogliamo farlo in modo che il livello di trama granulosa abbia spazio per muoversi senza esporre il livello di intestazione della pagina sottostante. Ciò significa che i livelli sono disposti più in questo modo:
Ora abbiamo una bella intestazione di pagina grande con un'immagine granulosa in alto:
Guarda la Pen evGvKg di Geoff Graham (@geoffgraham) su CodePen.
Passaggio 3: animazione del livello granuloso
L'ultima cosa che dobbiamo fare è animare il livello granuloso. Questo è l'effetto che stiamo cercando e conferisce all'intestazione della pagina quel fascino retrò e analogico.
Il sito DayTrip utilizza quanto segue per definire i fotogrammi chiave dell'animazione:
@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%) ) )È un po 'difficile visualizzare cosa significa quel codice, ma fondamentalmente sta spostando lo strato granuloso superiore in uno schema a zig-zag. Ecco un'illustrazione di come appare su scala più piccola:
Ora tutto ciò che dobbiamo fare è applicare i fotogrammi chiave .page-header:afterper vederlo avere effetto. Imposteremo l'animazione in modo che venga riprodotta per 8 secondi e in loop all'infinito:
.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; )Mettere tutto insieme
Ecco lo snippet completo con tutti i pezzi a posto. Nota che stiamo assumendo l'uso di Autoprefixer per tutti i prefissi dei fornitori.
.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%) ) )Guarda l'effetto granuloso animato da penna di Geoff Graham (@geoffgraham) su CodePen.