Scroll Reveal — Solo CSS

01 — desde los lados

Cards alternadas

Cada card entra desde un lado distinto usando animation-timeline: view().

⚡

Rápido

Cero JavaScript, solo CSS nativo del navegador.

🎯

Preciso

Controlás exactamente cuándo y cómo aparece cada elemento.

✨

Suave

La animación está sincronizada con el scroll, no hay saltos.

02 — imagen + texto

🖼️

Imagen desde la izquierda,
texto desde la derecha

El patrón más clásico de los sitios modernos. Cada elemento tiene su propia clase y su propia animación.

Y al revés también

Solo cambiás qué clase le ponés a cada elemento. La misma técnica, infinitas combinaciones.

🎨

03 — lista

Items desde la izquierda

🚀 Primer item — entra desde la izquierda

💡 Segundo item — también desde la izquierda

🔥 Tercer item — todos con view()

⭐ Cuarto item — sin JS

04 — números

Stats con scale

99%

SIN JAVASCRIPT

∞

ELEMENTOS

0ms

DE BUNDLE

el código

Así funciona

/* view() = se activa cuando el elemento
   entra en el viewport (no el scroll global) */

.from-left {
  animation: slide-left linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 35%;
  /*         ↑ mientras entra al viewport */
}

@keyframes slide-left {
  from {
    transform: translateX(-80px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* desde la derecha: solo cambiás el signo */
.from-right {
  animation-range: entry 0% entry 35%;
}
@keyframes slide-right {
  from { transform: translateX(+80px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

ScrollReveal