fbpx
León Desarrollo - Programación WordPress
Diseño gráfico

Efecto de Paralax con CSS


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.

Suscríbete

Si quieres estar al día con las novedades de este sitio te recomiendo que te suscribas.

Comentarios

Deja un comentario


Puede que también te interese

2018 animaciones animación Aranda array atributos añade base de datos buscar categoría css curso diseño Duero emprendimiento fechas fiduero guía imagen imagenes inauguracion instalar Isilla javascript linux local mac node.js pagina pagina web php post problemas producto servicio servidor solución split sql sql server stock string windows woocommerce wordpress

abril 2024
L M X J V S D
1234567
891011121314
15161718192021
22232425262728
2930  
  1. Hola, Muchas gracias por ofrecernos este contenido de calidad, es muy difícil encontrar contenido así en nuestro idioma. Aprovechando este…