Scroll-driven

Parallax

…

Drei Ebenen, drei Geschwindigkeiten, gebunden an dieselbe Container-Timeline. Ausschließlich transform — bleibt auf dem Compositor-Thread.

HINTERGRUND

MITTE

VORDERGRUND

.layer{
  animation: 1ms linear both;
  animation-timeline: scroll(nearest block);
}
.layer.back  { animation-name: drift-back  }
.layer.mid   { animation-name: drift-mid   }
.layer.front { animation-name: drift-front }

@keyframes drift-front{ to{ transform: translateY(-90%) } }

Compositor: nur transform/opacity. top/margin/width würden die Animation auf den Main-Thread zurückziehen — Jank.