Cool Things In My Cloud

Las Scroll-Driven Animations permiten que una animación esté controlada por la posición del scroll.
Es decir: a medida que el usuario hace scroll, se reproducen los keyframes.

Para el efecto parallax, se puede usar esta técnica para mover imágenes de fondo o capas a velocidades distintas.

---

Ejemplo básico: imagen con parallax suave

<section class="parallax">
  <h1>Bienvenido</h1>
</section>

<section class="contenido">
  <p>Texto de ejemplo después del parallax.</p>
</section>

.parallax {
  position: relative;
  height: 100vh;
  background: url('paisaje.jpg') no-repeat center / cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 3rem;
  text-shadow: 0 0 10px black;

  animation: moverFondo linear both;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}

@keyframes moverFondo {
  from {
    background-position: center 0;
  }
  to {
    background-position: center 200px;
  }
}

.contenido {
  height: 100vh;
  padding: 2rem;
  background: white;
}

En este ejemplo, la imagen de fondo se desplaza ligeramente mientras el usuario hace scroll, dando un efecto parallax.

---

Ejemplo avanzado: varias capas en parallax

<div class="escena">
  <div class="capa fondo"></div>
  <div class="capa medio"></div>
  <div class="capa frente"></div>
</div>

.escena {
  position: relative;
  height: 200vh; /* espacio para scroll */
  overflow: hidden;
}

.capa {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
}

/* Capa de fondo */
.fondo {
  background-image: url('cielo.jpg');
  animation: moverFondo linear both;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}

@keyframes moverFondo {
  from { transform: translateY(0); }
  to   { transform: translateY(100px); }
}

/* Capa del medio */
.medio {
  background-image: url('montañas.png');
  animation: moverMedio linear both;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}

@keyframes moverMedio {
  from { transform: translateY(0); }
  to   { transform: translateY(200px); }
}

/* Capa del frente */
.frente {
  background-image: url('bosque.png');
  animation: moverFrente linear both;
  animation-timeline: scroll(root);
  animation-range: 0% 100%;
}

@keyframes moverFrente {
  from { transform: translateY(0); }
  to   { transform: translateY(300px); }
}

Aquí cada capa se mueve a distinta velocidad, logrando un parallax con efecto 3D mucho más realista.

---

Ventajas frente a métodos antiguos

• No depende de JavaScript.
• Mejor rendimiento: se ejecuta en el compositor del navegador.
• Control total de rangos de scroll y animaciones.
• Efectos más suaves y consistentes entre navegadores modernos.

---

Conclusión

El parallax con Scroll-Driven Animations en CSS es la evolución natural de este efecto:

• Más sencillo de implementar.
• Más fluido en rendimiento.
• Más flexible en diseño.

Ahora, con unas pocas líneas de CSS, puedes crear páginas web con profundidad e interactividad, sin hacks ni scripts extra.