El efecto de paralaje es una técnica de diseño web en la que los elementos del fondo de la página web se mueven a una velocidad diferente que los del primer plano cuando se desplaza, creando una ilusión de profundidad y añadiendo un toque de interactividad. Aquí están los pasos básicos para crear un efecto de paralaje usando solo CSS.
1. Primero, necesitamos un contenedor y una imagen que se utilizará para el efecto de paralaje.
```HTML
2. Luego, estilizar el contenedor y la imagen.
```CSS
.parallax {
/* Altura fija para el contenedor */
height: 500px;
overflow: hidden;
position: relative;
}
.parallax-background { /* Uso de translateZ para crear profundidad */ transform: translateZ(-1px) scale(2);
/* Transformación en el centro */ transform-origin: top; position: absolute; /* La imagen completa siempre estará visible */ top: 0; bottom: 0; left: 0; right: 0; /* Inserción de imagen de fondo para el parallax */ background-image: url(‘ruta-de-tu-imagen.jpg’); /* Haz que la imagen de fondo cubra el área de div completa */ background-size: cover; /* Velocidad de desplazamiento del parallax . Menor número = más lento */ will-change: transform; backface-visibility: hidden; perspective: 1000px; } ```3. Por último, necesitamos animar la imagen para conseguir el efecto de paralaje. Para hacer eso, usamos el scroll de la página.
```CSS
@keyframes animatedBackground {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
.parallax-background {
/* Usamos nuestra animación */
animation: 30s linear infinite animatedBackground;
}
```
Esto es un ejemplo básico de cómo puedes lograr un efecto de paralaje únicamente con CSS. Sin embargo, existen muchas implementaciones más complejas y avanzadas que puedes explorar, tales como el uso de JavaScript para un efecto de paralaje más preciso y controlado.
