Code Tutorial - Wie entsteht eine Scroll-to-Action-Sequenz wie bei Apple?
Frames statt Video, Canvas-Rendering, Scroll-Binding: Schritt für Schritt zur Apple-Style-Scroll-Sequenz - mit Code und unserem Deliver-Films-Projekt als Referenz.
Apple hat es perfektioniert: Man scrollt auf der Website eines Produkts und statt einer statischen Seite entfaltet sich eine kleine Inszenierung. Bei den AirPods beispielsweise: Lichtreflexe, Drehungen, perfekte Übergänge. Diese Art von Scroll-to-Action-Sequenz ist mehr als Show. Sie sorgt dafür, dass Nutzer länger bleiben, Produkte eindrucksvoller wirken und eine Marke Premium-Qualität ausstrahlt.
Wir bei INSYNC haben dieses Prinzip u. a. für Deliver Films umgesetzt. Ein Produktionsstudio, das seine Expertise online genauso filmisch präsentieren wollte wie auf der großen Leinwand. Wie funktioniert das technisch? Schauen wir uns die Grundlagen an.
Das Wichtigste in Kürze
- Apple-Scroll ist kein Video, sondern Frame-für-Frame auf einem Canvas.
- Zwei Kernideen: Canvas-Rendering und Scroll-Binding.
- Preloading entscheidet, ob es flüssig wie ein Film wirkt.
Die Idee hinter der Animation
Zunächst: Das Ganze ist kein Video. Wäre es ein Video, könnte es nicht an die Scroll-Position gebunden sein. Stattdessen wird hier eine Abfolge von Einzelbildern (Frames) geladen, die beim Scrollen nacheinander gezeigt werden. Dadurch entsteht der Eindruck einer nahtlosen Animation.
Die Technik basiert auf zwei Kernideen:
1. Canvas Rendering → Die Frames werden auf ein <canvas>-Element gemalt, das auf der Seite fixiert ist.
2. Scroll Binding → Je nachdem, wie weit der Nutzer scrollt, wird der passende Frame geladen und angezeigt.
Apple nutzt dazu hunderte von Einzelbildern - die durch optimiertes Preloading so schnell wechseln, dass es aussieht wie ein Video.
Grundstruktur in HTML & CSS
Wir brauchen drei Dinge: eine Scrollfläche, ein Canvas, und etwas Text. Das CSS sorgt dafür, dass das Canvas fixiert bleibt, während man scrollt:
<!-- HTML -->
<body>
<canvas id="scrollAnimation"></canvas>
<p id="copy">Deliver Films</p>
</body>
/* CSS */
html, body {
margin: 0;
height: 500vh; /* viel Scrollplatz */
background: black;
}
canvas {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100vw;
max-height: 100vh;
}Die Frames vorbereiten
Wir exportieren eine Sequenz von Bildern (z. B. 120 Stück aus einer 3D-Animation). Diese liegen dann in einem Ordner und heißen z. B.:
seq_0001.jpg
seq_0002.jpg
...
seq_0120.jpgJavaScript - Scroll mit Frames verbinden
Jetzt kommt die Magie. Was hier passiert:
Wir berechnen, wie weit der Nutzer gescrollt hat.
Wir wandeln diesen Wert in einen Frame-Index um.
Dann laden und zeichnen wir genau dieses Bild auf das Canvas.
const canvas = document.getElementById("scrollAnimation");
const context = canvas.getContext("2d");
const frameCount = 120;
const currentFrame = (i) =>
`./frames/seq_${i.toString().padStart(4, "0")}.jpg`;
const img = new Image();
img.src = currentFrame(1);
canvas.width = 1920;
canvas.height = 1080;
img.onload = () => context.drawImage(img, 0, 0);
const updateImage = (index) => {
img.src = currentFrame(index);
img.onload = () => context.drawImage(img, 0, 0);
};
window.addEventListener("scroll", () => {
const scrollTop = document.documentElement.scrollTop;
const maxScrollTop = document.documentElement.scrollHeight - window.innerHeight;
const scrollFraction = scrollTop / maxScrollTop;
const frameIndex = Math.min(
frameCount - 1,
Math.floor(scrollFraction * frameCount)
);
requestAnimationFrame(() => updateImage(frameIndex + 1));
});
Optimierung
Damit es flüssig läuft, braucht es Preloading und Komprimierung. Apple löst das über Content Delivery Networks (CDNs) und stark optimierte Assets. Eine einfache Variante:
So sind die Frames bereits im Cache, wenn der Nutzer scrollt.
const preloadImages = () => {
for (let i = 1; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
}
};
preloadImages();Unser Projekt: Deliver Films
Bei Deliver Films haben wir das Ganze auf die nächste Ebene gebracht:
- Individuelle 3D-Renderings statt Fotos.
- Nahtlose Übergänge zwischen Scroll-Sequenz und anderen Seitenelementen.
- Storytelling-Fokus: Jede Bewegung war dramaturgisch auf die Marke abgestimmt - nicht nur ein Effekt.
Das Ergebnis: eine Website, die sofort „Kino" schreit und Kunden schon beim ersten Scrollen begeistert. Wirf gerne einen Blick auf das finale Ergebnis.
Fazit
Eine Scroll-to-Action-Sequenz wie bei Apple basiert im Kern auf einem einfachen Prinzip: viele Einzelbilder, ein Canvas, und die Scroll-Position als Controller.
Die wahre Kunst liegt jedoch darin, diese Technik in eine Geschichte einzubetten - so wie wir es bei Deliver Films getan haben. Denn erst wenn Technik und Storytelling Hand in Hand gehen, entsteht eine Website, die nicht nur beeindruckt, sondern einen bleibenden Eindruck hinterlässt.
Wichtig: Der Code hier ist eine stark vereinfachte Version. In der Praxis arbeiten wir mit hunderten Zeilen Code - Debug-Skripten, Performance-Optimierungen, sauberer Asset-Komprimierung, präzisen Trigger-Punkten und Fallbacks für verschiedene Devices. Erst durch diese Detailarbeit läuft eine Sequenz wirklich flüssig, performant und auf allen Plattformen stabil.
Weitere Artikel
Lass uns über euer Projekt sprechen!
20-Minuten Gespräch, ohne Verkaufsdruck. Ihr beschreibt, was ihr vorhabt und wir sagen, ob und wie wir helfen können.