Live Demos

Was ich lerne, direkt ausprobiert.

1. Scroll Progress Bar CSS Scroll-Driven

Die blaue Leiste oben zeigt den Scroll-Fortschritt — ohne JavaScript.

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: #3b82f6;
  transform-origin: left;
  animation: grow-progress linear;
  animation-timeline: scroll();
}

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

2. Fade-In beim Scrollen animation-timeline: view()

Elemente erscheinen sanft wenn sie in den Viewport kommen.

Erstes Element

Scroll runter um mehr zu sehen...

Zweites Element

Jedes Element hat seine eigene Timeline.

Drittes Element

Pure CSS, kein IntersectionObserver nötig.

.scroll-reveal {
  animation: fade-in-up linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

3. Parallax Effekt Verschiedene Scroll-Speeds

🌙

⭐

Scroll um den Parallax zu sehen

4. Scale beim Viewport-Entry

🚀

💡

🎨

⚡

⚠️ Browser Support

CSS Scroll-Driven Animations sind Teil von Interop 2026. Chrome & Edge unterstützen sie bereits, Firefox & Safari folgen dieses Jahr. Falls Animationen nicht funktionieren, nutze Chrome/Edge.