Le site Web DayTrip utilise un effet soigné sur son en-tête de page qui déforme l'image d'arrière-plan avec une texture animée et granuleuse. L'effet est subtil mais crée une ambiance rétro poussiéreuse.
L'effet est très subtil. Vous pouvez voir la différence où l'effet est en place à droite et désactivé à gauche:
Nous pouvons créer le même effet rustique avec une seule image et un peu de CSS.
Étape 1: Configurer les choses
Commençons par configurer l'en-tête de notre page. Nous allons utiliser un modèle commun où une image d'arrière-plan occupe tout l'espace.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Voici un exemple pour nous aider à démarrer:
Voir le Pen RpLKdx de Geoff Graham (@geoffgraham) sur CodePen.
Étape 2: sélection d'une texture
Ensuite, nous avons besoin d'une image avec une texture granuleuse. Vous pouvez le créer vous-même. Subtle Patterns propose également un certain nombre d'options intéressantes, dont celle-ci que nous utiliserons pour notre démo. Notez que l'image n'a pas besoin d'être énorme. Quelque chose dans le quartier de 400pxsquare fera l'affaire.
L'idée est que nous superposerons la texture granuleuse sur le dessus du .page-header. Nous pouvons utiliser le :afterpseudo-élément dessus .page-header, il n'est donc pas nécessaire de créer un autre élément.
.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; )Notez que nous avons placé un heightet widthsur le pseudo-élément ainsi qu'un topet leftpour qu'il dépasse réellement la limite de l'en-tête de page et soit centré sur celui-ci. Nous voulons faire cela pour que la couche de texture granuleuse ait de la place pour se déplacer sans exposer la couche d'en-tête de page en dessous. Cela signifie que les couches sont disposées plus comme ceci:
Nous avons maintenant un joli grand en-tête de page avec une image granuleuse en haut:
Voir le Pen evGvKg de Geoff Graham (@geoffgraham) sur CodePen.
Étape 3: Animation du calque granuleux
La dernière chose à faire est d'animer le calque granuleux. C'est l'effet que nous recherchons et donne à l'en-tête de page cet attrait rétro et analogique.
Le site DayTrip utilise les éléments suivants pour définir les images clés de l'animation:
@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%) ) )C'est un peu difficile de visualiser ce que signifie ce code, mais il s'agit essentiellement de déplacer la couche granuleuse supérieure dans un motif en zig-zag. Voici une illustration de ce à quoi cela ressemble à plus petite échelle:
Il ne nous reste plus qu'à appliquer les images clés pour .page-header:afterles voir prendre effet. Nous allons définir l'animation pour qu'elle soit lue pendant 8 secondes et en boucle à l'infini:
.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; )Mettre tous ensemble
Voici l'extrait complet avec toutes les pièces en place. Notez que nous supposons l'utilisation de l'Autoprefixer pour tous les préfixes de fournisseurs.
.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%) ) )Voir le Pen Animated Grainy Effect de Geoff Graham (@geoffgraham) sur CodePen.