Cómo crear un efecto de paralaje solo con CSS
El efecto de paralaje es uno de los pequeños trucos más ingeniosos que puedes usar en tu página de destino para atraer la atención de tus visitantes. CSS ha madurado mucho en los últimos años, y esto significa que hay mucha flexibilidad en cuanto a cómo se debe hacer algo. Sin embargo, los trucos de hacky como la posición de fondo son bastante difíciles de mantener. Este artículo demostrará cómo puede usar CSS moderno para crear un hermoso efecto de paralaje fácil de mantener.
La teoría detrás del efecto de paralaje
Comprender las condiciones requeridas para crear un efecto de paralaje ayuda a implementarlo correctamente. Sin embargo, si desea omitir y comenzar a escribir código en su lugar, diríjase a la siguiente tema. El efecto de paralaje consiste en hacer que dos (en aras de la explicación) capas una encima de la otra moviéndose a una velocidad constante parezcan que la capa superior se mueve relativamente más rápido que la capa inferior.
Es posible que haya visto aplicaciones del efecto de paralaje desde juegos 2D donde el fondo parece cambiar más lentamente en comparación con el primer plano. Es posible que haya observado el efecto de paralaje mientras estaba en el automóvil, donde los objetos más lejanos parecen moverse más lentamente que otros automóviles en la carretera.
En pocas palabras, las condiciones que deben cumplirse para que se cree un efecto de paralaje son:
- Modifique la forma en que se percibe la capa de paralaje de tal manera que parezca que se mueve relativamente más rápido o más lento, sin desviarse de su tamaño original.
- No altere la posición ni la velocidad.
Para lograr estas dos condiciones, debemos aumentar la distancia perceptible entre el usuario y la capa, luego desplazarla a lo largo del eje Z negativo. Debido a que aumenta la distancia perceptible, la capa puede parecer más pequeña. Para contrarrestar esta disminución de tamaño, podemos escalarlo de nuevo a su tamaño original. Esto significa que utilizaremos principalmente dos propiedades CSS: perspectiva y transformar. Haremos uso de las transformaciones translateZ() y scale().
Juntando algo de marcado
En primer lugar, necesitamos algo de HTML. Cree un archivo llamado index.html y copie y pegue el siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pure CSS Parallax Effect</title>
</head>
<body>
<main>
<section class="no-parallax">
<h1>Fun fact:</h1>
</section>
<section class="parallax bg">
<h1>
The sound that occurs when you snap your fingers is made by your
middle finger hitting your palm!
</h1>
</section>
<section class="no-parallax">
<h1>Have a nice day!</h1>
</section>
</main>
</body>
</html>
Esto creará 3 secciones de las cuales solo la 2 tendrá el efecto de paralaje. Es más fácil notar la diferencia cuando hay 2 secciones estáticas/sin paralaje para comparar. Ahora, cree un archivo styles.css y luego vincúlelo al archivo HTML poniendo el siguiente código en la etiqueta
:<link rel="stylesheet" href="styles.css" />
Implementando parallax usando CSS
El marcado no parece tan atractivo en este momento, así que antes de implementar el efecto de paralaje, pegue el siguiente código en su archivo styles.css creado anteriormente:
body {
margin: 0;
}main {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.no-parallax {
background-color: #111;
z-index: 999;
}
section h1 {
text-align: center;
font-size: 4rem;
font-family: sans-serif;
}
.parallax h1 {
width: 60%;
font-size: 2rem;
}
Los elementos
El siguiente paso es aumentar la distancia perceptible entre el usuario y el elemento principal, para lo cual usaremos la propiedad de perspectiva. Cuanto menor sea el valor, más sutil y natural parecerá el efecto de paralaje.
main {
overflow-y: auto;
perspective: 2px;
}Ahora, tenemos que transformar la capa de paralaje a lo largo del eje Z negativo, y luego aumentar su escala para contrarrestar la disminución de tamaño porque previamente alteramos la perspectiva. Esto se debe a que cuando se aplica la perspectiva a un padre, los hijos de ese padre se verán afectados.
Si el niño tiene un valor de Z mayor que 0, aparecerá más grande, y si es menor que 0, aparecerá más pequeño. La propiedad Z mueve el elemento en el espacio 3d acercándolo a nosotros (pareciendo más grande) o alejándolo de nosotros (pareciendo más pequeño).
En primer lugar, necesitaremos aplicar transform-style: preserve-3d; al padre del elemento en el que queremos aplicar la transformación Z. Esto asegurará que sus elementos secundarios se coloquen en el espacio 3d en lugar de en el plano aplanado 2d:
.section{
transform-style: preserve-3d;position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
Ahora, colocaremos la imagen que tendrá el efecto de paralaje. Podemos usar un div o un img o cualquier otro elemento, pero para este tutorial solo usaremos el elemento pseudo-selector :: after, solo porque podemos 🙂
.parallax::after {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}A continuación, le agregamos la imagen de fondo, que es una imagen aleatoria seleccionada de picsum.photos.
.bg::after {
background: url('https://picsum.photos/1080/720');
background-size: cover;
}Para hacerlo aún mejor, agregaremos una capa oscura en la parte superior de la imagen para que el texto blanco sea más legible. Para hacerlo, agregamos el degradado lineal a nuestra propiedad de imagen de fondo:
.bg::after {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('https://picsum.photos/1080/720');
background-size: cover;
}Una vez hecho esto, deberíamos poder notar el efecto de paralaje al desplazarnos hacia arriba y hacia abajo. Aparecerá como si la fuente fuera fija y la imagen de fondo se moviera lentamente debajo de ella. Si parece que no funciona, eche un vistazo al siguiente Codepen y haga una referencia cruzada de su código con el código que contiene:
El efecto que hemos implementado es bastante simple y atractivo, pero si necesita más control sobre cómo debería verse el efecto, ¡debería probar la extensión de paralaje fullPage.js!
Su navegador no soporta la etiqueta de vídeo.
Ya sea que planee crear un sitio de una sola página con desplazamiento instantáneo o simplemente desee un efecto de paralaje elegante que funcione tanto vertical como horizontalmente, la extensión lo respalda. También viene con soporte incorporado para CMS como WordPress a través de editores como Elementor y Gutenberg.
Conclusión
Los efectos como el efecto de paralaje son un método relativamente simple para aumentar el atractivo y captar la atención del usuario. Sin embargo, es importante recordar que para que las cosas se vean bien, nunca debe sacrificar la experiencia del usuario o, en otras palabras, debe usar los efectos con moderación cuando pueda maximizar su potencial.
¡Oh! y si está utilizando WordPress, consulte nuestra lista de los mejores temas de Parallax para WordPress.
