{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "zoom-parallax",
 "name": "Zoom-Parallax / Zoom-through",
 "name_en": "Zoom parallax / zoom-through section",
 "kurz": "Eine Lage-Collage in einer gepinnten Bühne: Beim Scrollen wächst jede Kachel mit eigenem Endfaktor, die Ränder fliegen hinaus, das Kernbild füllt am Ende den Viewport.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "C",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "filmisch",
  "verspielt"
 ],
 "stimmung_roh": [
  "dramatisch",
  "immersiv",
  "verspielt"
 ],
 "technik": [
  "css",
  "scroll-driven-css",
  "gsap",
  "scrolltrigger"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "1) Eine Bühne ist gepinnt (sticky, 100vh) und liegt in einer Strecke von 300vh. 2) Darin liegen mehrere Bilder als Collage um ein Kernbild. 3) Beim Scrollen skalieren alle Bilder vom Zentrum aus, jedes mit eigenem Endfaktor (z. B. 4, 5, 6, 8, 9). 4) Die Randbilder fliegen dadurch aus dem Bild, das Kernbild füllt am Ende den Viewport. Es fühlt sich an wie ein Flug durch die Collage.",
  "warum_es_wirkt": "Unterschiedliche Endfaktoren erzeugen Tiefe ohne 3D: Was schneller wächst, scheint näher zu sein. Der Übergang ist dramatisch und braucht wenig Code.",
  "wann_einsetzen": "Als Galerie-Intro, in Fotografie- und Architektur-Portfolios oder als Übergang in eine Detail-Section. Gut für einen einzigen großen Moment auf einer Seite.",
  "wann_nicht": "Bei niedrig aufgelösten Rasterbildern, denn Faktor 9 zeigt Pixel. Bei vielen schweren Bildern auf Mobilgeräten. Bei Werk- oder Objektfotos, deren Ausschnitt nicht verändert werden darf.",
  "varianten": [
   "Collage-Zoom mit unterschiedlichen Endfaktoren",
   "Mit Unschärfe auf den Randbildern",
   "Durch Typografie hindurch: Wörter flankieren das Kernbild und fliegen beim Zoom nach außen",
   "3D-Variante mit translateZ und perspective"
  ],
  "umsetzung": "Jede Ebene liegt absolut über der ganzen Bühne (inset: 0; display: grid; place-items: center), die Kachel darin wird per translate versetzt. Skaliert wird die Ebene, nicht die Kachel: Dann wächst alles vom Viewport-Zentrum aus und der Versatz wandert mit nach außen. Den Fortschritt liefert eine Scroll-Zeitachse: .strecke { height: 300vh; view-timeline-name: --zoom } .buehne { animation: p linear both; animation-timeline: --zoom; animation-range: contain } mit @property --p und @keyframes p { to { --p: 1 } }. Die Ebenen rechnen scale: calc(1 + (var(--s) - 1) * var(--p)). Alternativ direkt @keyframes z { to { scale: var(--s) } } je Ebene. Ohne animation-timeline setzt ein Scroll-Listener --p. Der Kern endet bei 25vw × 25vh mal 4 genau formatfüllend. Vektorgrafiken bleiben scharf, Rasterbilder in hoher Auflösung liefern; will-change: transform nur während der Animation.",
  "mobil": "Weniger Bilder (3 bis 6) und kleinere Endfaktoren. Das Kernbild im Hochformat breiter anlegen (z. B. 40vw × 25vh), damit Faktor 4 den Bildschirm füllt. Bildgrößen per srcset.",
  "reduzierte_bewegung": "Keine Strecke und keine Skalierung. Die Collage steht als statisches Raster, das Kernbild groß oben.",
  "barrierefreiheit": "Dekorative Randbilder mit alt=\"\" oder aria-hidden. Das Kernbild bekommt eine Beschreibung. Links im Endzustand erst klickbar machen, wenn sie sichtbar sind."
 },
 "messwerte": {
  "easing": "linear",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "Track 300vh; Scale 1 → 4…9",
  "sonstiges": "Wrapper 25vw × 25vh",
  "herkunft": "beobachtet",
  "quelle": "https://blog.olivierlarose.com/tutorials/zoom-parallax"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Olivier Larose – Zoom Parallax",
   "url": "https://blog.olivierlarose.com/tutorials/zoom-parallax",
   "auszeichnung": "",
   "beobachtung": "300vh-Track, sticky 100vh, Wrapper 25vw × 25vh, Scale-Endwerte 4/5/6/8/9, offset ['start start','end end'], Lenis.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "Olivier Larose – Zoom Parallax",
   "url": "https://blog.olivierlarose.com/tutorials/zoom-parallax"
  },
  {
   "titel": "Olivier Larose – 3D Perspective Scroll",
   "url": "https://blog.olivierlarose.com/tutorials/3d-perspective-scroll"
  }
 ],
 "kombinierbar_mit": [
  "medien-expansion-scroll",
  "section-overlap-uebergang"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/zoom-parallax/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/zoom-parallax/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/zoom-parallax/demo"
 },
 "herkunft": {
  "quelldateien": [
   "scroll.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Kein Produktionsbeleg gefunden (nur Olivier-Larose-Tutorial); Vorschlag C."
  ],
  "prioritaet_hinweis": "31.10.2026: B → C laut patch-belege-3.json (Kein Produktionsbeleg gefunden (nur Olivier-Larose-Tutorial); Vorschlag C.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Eine Lage-Collage in einer gepinnten Bühne: Beim Scrollen wächst jede Kachel mit eigenem Endfaktor, die Ränder fliegen hinaus, das Kernbild füllt am Ende den Viewport.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "linear (Fortschritt 1:1 am Scroll)",
   "strecke": "300vh, Bühne position: sticky, 100svh, overflow: clip",
   "fortschritt": "@property --p <number> 0 → 1; CSS view-timeline-name: --zoom, animation-range: contain 0% contain 100%; ohne Unterstützung setzt JS --p aus getBoundingClientRect",
   "skalierung": "scale: calc(1 + (var(--s) - 1) * var(--p)) auf der vollflächigen Ebene, nicht auf der Kachel",
   "endfaktoren_desktop": "Kern 4 · Alpen 5 · Kennzahl 5 · Steg 6 · Grundriss 6 · Lage 8 · Fassade 9",
   "kacheln_desktop": "Kern 25vw × 25vh; Alpen 35vw × 30vh (5vw, −30vh); Steg 20vw × 45vh (−25vw, −10vh); Kennzahl 25vw × 25vh (27.5vw, 0); Grundriss 20vw × 25vh (5vw, 27.5vh); Lage 30vw × 25vh (−22.5vw, 27.5vh); Fassade 15vw × 15vh (25vw, 22.5vh)",
   "telefon": "6 statt 7 Kacheln, Kern 40vw × 25vh ×4, Ränder ×4,5 bis ×6",
   "unschaerfe": "filter: blur(calc(var(--p) * 1.4px)) auf den Randkacheln, wird mit der Ebene mitskaliert (sichtbar bis ca. 12 px)",
   "schrift": "Libre Caslon Display clamp(2.5rem, 7.4vw, 8.5rem), Lücke 25vw + 3.2vw um das Kernbild, Endfaktor 5, Deckkraft clamp(0, (0.62 − p) × 4, 1)",
   "abschluss": "Einblendung ab p 0.84 über 1/7 der Strecke, 28px Versatz; Links klickbar ab p 0.93",
   "ui": "cubic-bezier(0.165, 0.84, 0.44, 1) 400 ms (Variantenwechsel), 200 ms Hover",
   "vorfuehrung": "simulierter Fortschritt: 900 ms halten, 5200 ms hinein, 1700 ms halten, 2600 ms zurück; Tempo der Kamerafahrt sinusförmig, Effekt selbst linear"
  },
  "ausloeser": "scroll",
  "touch": "Nativer Scroll treibt dieselbe Strecke. Ohne Hover entfällt die Lage-Kachel, auf dem Telefon liegen sechs Kacheln im Hochformat mit Endfaktoren 4 bis 6. Das Pult klappt zu „Steuerung +“ ein.",
  "reduziert": "Keine Strecke und keine Skalierung: Kernbild mit Exposé-Block oben, die übrigen Kacheln als statisches Raster (3 Spalten, Telefon 2).",
  "korrekturen": {
   "beschreibung": "1) Eine Bühne ist gepinnt (sticky, 100vh) und liegt in einer Strecke von 300vh. 2) Darin liegen mehrere Bilder als Collage um ein Kernbild. 3) Beim Scrollen skalieren alle Bilder vom Zentrum aus, jedes mit eigenem Endfaktor (z. B. 4, 5, 6, 8, 9). 4) Die Randbilder fliegen dadurch aus dem Bild, das Kernbild füllt am Ende den Viewport. Es fühlt sich an wie ein Flug durch die Collage.",
   "warum_es_wirkt": "Unterschiedliche Endfaktoren erzeugen Tiefe ohne 3D: Was schneller wächst, scheint näher zu sein. Der Übergang ist dramatisch und braucht wenig Code.",
   "wann_einsetzen": "Als Galerie-Intro, in Fotografie- und Architektur-Portfolios oder als Übergang in eine Detail-Section. Gut für einen einzigen großen Moment auf einer Seite.",
   "wann_nicht": "Bei niedrig aufgelösten Rasterbildern, denn Faktor 9 zeigt Pixel. Bei vielen schweren Bildern auf Mobilgeräten. Bei Werk- oder Objektfotos, deren Ausschnitt nicht verändert werden darf.",
   "varianten": [
    "Collage-Zoom mit unterschiedlichen Endfaktoren",
    "Mit Unschärfe auf den Randbildern",
    "Durch Typografie hindurch: Wörter flankieren das Kernbild und fliegen beim Zoom nach außen",
    "3D-Variante mit translateZ und perspective"
   ],
   "umsetzung": "Jede Ebene liegt absolut über der ganzen Bühne (inset: 0; display: grid; place-items: center), die Kachel darin wird per translate versetzt. Skaliert wird die Ebene, nicht die Kachel: Dann wächst alles vom Viewport-Zentrum aus und der Versatz wandert mit nach außen. Den Fortschritt liefert eine Scroll-Zeitachse: .strecke { height: 300vh; view-timeline-name: --zoom } .buehne { animation: p linear both; animation-timeline: --zoom; animation-range: contain } mit @property --p und @keyframes p { to { --p: 1 } }. Die Ebenen rechnen scale: calc(1 + (var(--s) - 1) * var(--p)). Alternativ direkt @keyframes z { to { scale: var(--s) } } je Ebene. Ohne animation-timeline setzt ein Scroll-Listener --p. Der Kern endet bei 25vw × 25vh mal 4 genau formatfüllend. Vektorgrafiken bleiben scharf, Rasterbilder in hoher Auflösung liefern; will-change: transform nur während der Animation.",
   "mobil": "Weniger Bilder (3 bis 6) und kleinere Endfaktoren. Das Kernbild im Hochformat breiter anlegen (z. B. 40vw × 25vh), damit Faktor 4 den Bildschirm füllt. Bildgrößen per srcset.",
   "reduzierte_bewegung": "Keine Strecke und keine Skalierung. Die Collage steht als statisches Raster, das Kernbild groß oben.",
   "barrierefreiheit": "Dekorative Randbilder mit alt=\"\" oder aria-hidden. Das Kernbild bekommt eine Beschreibung. Links im Endzustand erst klickbar machen, wenn sie sichtbar sind."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept immobilien-diskret-hochwertig schließt zoom-parallax für Objektfotos aus (Ausschnitt muss unverfälscht bleiben). Deshalb hier kein Exposé, sondern die Lage-Seite eines Neubauprojekts: erfundener Bauträger Haldenbach Immobilien, Starnberg, Projekt Uferhaus Percha. Alle Kacheln sind eigene Vektorgrafiken (Visualisierung, Steg, Alpen, Grundriss, Lageplan, Fassade) plus eine Kennzahl-Kachel in HTML, das Kernbild landet scharf bei Faktor 4. Libre Caslon Display und Hanken Grotesk, Leinen, Sand, Markenblau, Orange nur für den CTA. Ein registriertes --p treibt alles; nativ per view-timeline, sonst JS. Die Vorführung simuliert den Fortschritt, statt die Seite zu scrollen (Programm-Scroll ruckelt mit sticky). Referenzen als Prinzip: themodernhouse.com, cactusdigitale.com, blog.olivierlarose.com. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: Grau für Marken-Zusatz und Einstiegsfuß #7b7874 → #6b6864 (5,3:1); Abschluss-Panel ist inert, solange es nicht eingeblendet ist; Knopf-Rahmen im Kontrastmodus."
 }
}