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 donde el efecto está en su lugar a la derecha y deshabilitado a la izquierda:
Sin efecto (izquierda) vs.Efecto granulado (derecha)
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 donde una imagen de fondo ocupa todo el espacio.
.page-header {
height: 100vh;
background-image: url("/path/to/image.jpg");
}Aquí hay 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 400px cuadrado hará el truco.
La idea es que superpondremos la textura granulada encima del .page-header. Podemos usar el :after pseudo-elemento en .page-header por lo que no es necesario crear otro elemento.
.page-header {
height: 100vh;
background-image: url("/path/to/image.jpg");
}
.page-header:after {
/* content is required when using :after */
content: "";
/* The grainy image */
background-image: url("/path/to/grainy/image.jpg");
/* 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 height y width en el pseudo-elemento, así como un top y left de modo 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:
La capa superior ahora excede los límites del encabezado de la página.
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 de 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 a .page-header:after para que 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");
/* 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 asumimos el uso de Autoprefixer para todos los prefijos de proveedores.
.page-header {
height: 100vh;
background-image: url("/path/to/image.jpg");
}
.page-header:after {
animation: grain 8s steps(10) infinite;
background-image: url("/path/to/grainy/image.jpg");
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.