El sitio web de DayTrip utiliza un efecto ordenado en el encabezado de su página que distorsiona la imagen de fondo con una textura granulada animada. El efecto es sutil pero crea un ambiente retro y polvoriento.
El efecto es muy sutil. Puede ver la diferencia entre la ubicación del efecto a la derecha y la desactivación a la izquierda:
Podemos crear el mismo efecto rústico con una sola imagen y un poco de CSS.
Paso 1: Configurar las cosas
Primero, configuremos el encabezado de nuestra página. Usaremos un patrón común en el que una imagen de fondo ocupa todo el espacio.
.page-header ( height: 100vh; background-image: url("/path/to/image.jpg.webp"); )Aquí tienes un ejemplo para comenzar:
Vea el Pen RpLKdx de Geoff Graham (@geoffgraham) en CodePen.
Paso 2: seleccionar una textura
A continuación, necesitamos una imagen con una textura granulada. Puede crearlo usted mismo. Subtle Patterns también tiene una serie de buenas opciones, incluida esta que usaremos para nuestra demostración. Tenga en cuenta que la imagen no necesita ser enorme. Algo en el barrio de la 400pxplaza funcionará.
La idea es que superpondremos la textura granulada encima del .page-header. Podemos usar el :afterpseudoelemento .page-headerpara que no sea necesario crear otro 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; )Tenga en cuenta que colocamos un heighty widthen el pseudoelemento, así como un topy de leftmodo que realmente exceda el límite del encabezado de la página y esté centrado en él. Queremos hacer esto para que la capa de textura granulada tenga espacio para moverse sin exponer la capa de encabezado de página debajo. Esto significa que las capas están organizadas de esta manera:
Ahora tenemos un bonito encabezado de página grande con una imagen granulada en la parte superior:
Vea el Pen evGvKg de Geoff Graham (@geoffgraham) en CodePen.
Paso 3: animación de la capa granulada
Lo último que debemos hacer es animar la capa granulada. Este es el efecto que buscamos y le da al encabezado de la página ese atractivo retro y analógico.
El sitio DayTrip utiliza lo siguiente para definir los fotogramas clave de animación:
@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%) ) )Es un poco difícil visualizar lo que significa ese código, pero básicamente se trata de mover la capa granulada superior en un patrón de zig-zag. Aquí hay una ilustración de cómo se ve a una escala más pequeña:
Ahora todo lo que tenemos que hacer es aplicar los fotogramas clave para .page-header:afterque surta efecto. Configuraremos la animación para que se reproduzca durante 8 segundos y se repita infinitamente:
.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; )Poniendolo todo junto
Aquí está el fragmento completo con todas las piezas en su lugar. Tenga en cuenta que estamos asumiendo el uso de Autoprefixer para todos los prefijos de proveedores.
.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%) ) )Vea el efecto granulado animado con lápiz de Geoff Graham (@geoffgraham) en CodePen.