Crear un efecto de paralax con CSS (utilizando solo CSS) puede ser un poco complicado debido a las limitaciones del lenguaje. Sin embargo, se puede lograr un efecto de paralaje simple utilizando propiedades de fondo y posiciones relativas. Aquí tienes un ejemplo básico:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Paralaje con CSS</title>
</head>
<body>
<div class="parallax-container">
<div class="parallax-layer layer1"></div>
<div class="parallax-layer layer2"></div>
<div class="parallax-layer layer3"></div>
</div>
</body>
</html>
CSS (styles.css):
body {
margin: 0;
padding: 0;
}
.parallax-container {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
.parallax-layer {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.layer1 {
background-image: url("imagen1.jpg");
z-index: -3;
}
.layer2 {
background-image: url("imagen2.jpg");
z-index: -2;
}
.layer3 {
background-image: url("imagen3.jpg");
z-index: -1;
}
/* Efecto de paralaje */
.parallax-layer.layer1 {
animation: parallax1 10s linear infinite;
}
.parallax-layer.layer2 {
animation: parallax2 15s linear infinite;
}
.parallax-layer.layer3 {
animation: parallax3 20s linear infinite;
}
@keyframes parallax1 {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-20%);
}
}
@keyframes parallax2 {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-15%);
}
}
@keyframes parallax3 {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-10%);
}
}
En este ejemplo, hemos creado un efecto de paralax con CSS utilizando tres capas con imágenes de fondo diferentes. Cada capa tiene su propia animación de desplazamiento vertical (en este caso hacia arriba) para crear el efecto de profundidad.
Este enfoque es bastante básico y puede no ser tan suave como otras soluciones más avanzadas que involucran JavaScript. Sin embargo, te da una idea de cómo se podría lograr un efecto de paralaje utilizando solo CSS. Puedes personalizar los tiempos, las imágenes y los estilos según tus necesidades.
Efecto de paralax con CSS y JavaScript
Si la solución anterior no es fluida, puedes suavizarla utilizando también JavaScript. Aquí tienes un ejemplo de cómo crear un efecto de paralax con CSS y JavaScript de una manera más suave y controlada:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Paralaje con CSS y JavaScript</title>
</head>
<body>
<div class="parallax-container">
<div class="parallax-layer layer1"></div>
<div class="parallax-layer layer2"></div>
<div class="parallax-layer layer3"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css):
body {
margin: 0;
padding: 0;
}
.parallax-container {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
.parallax-layer {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
transform: translate3d(0, 0, 0);
}
.layer1 {
background-image: url("imagen1.jpg");
z-index: -3;
}
.layer2 {
background-image: url("imagen2.jpg");
z-index: -2;
}
.layer3 {
background-image: url("imagen3.jpg");
z-index: -1;
}
JavaScript (script.js):
const parallaxLayers = document.querySelectorAll(".parallax-layer");
window.addEventListener("scroll", function() {
parallaxLayers.forEach(function(layer, index) {
const depth = index + 1;
const yOffset = -window.scrollY / depth;
layer.style.transform = `translate3d(0, ${yOffset}px, 0)`;
});
});
En este ejemplo, hemos utilizado JavaScript para controlar el desplazamiento de las capas de paralaje. La función window.addEventListener("scroll", ...) se activa cuando el usuario hace scroll en la página. Para cada capa de paralaje, calculamos el desplazamiento vertical (yOffset) en función de la profundidad de la capa. Esto crea un efecto de paralaje más suave y controlado a medida que el usuario hace scroll.
Puedes ajustar el cálculo del desplazamiento (yOffset) y los estilos de las capas según tus preferencias y necesidades.
Deja un comentario