{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "medien-expansion-scroll",
 "name": "Medien-Expansion beim Scrollen (Bild/Video wächst zum Vollbild)",
 "name_en": "Scale-up media to fullscreen / expanding image on scroll / Scroll-driven media expand / zoom-in hero",
 "kurz": "Ein kleines Bild zwischen zwei Wörtern wächst beim Scrollen zum randlosen Vollbild, die Wörter weichen der Kante aus.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "luxuriös",
  "filmisch"
 ],
 "stimmung_roh": [
  "filmisch",
  "immersiv",
  "luxuriös",
  "kinoreif",
  "dramatisch"
 ],
 "technik": [
  "gsap",
  "scrolltrigger",
  "scroll-driven-css",
  "css",
  "clip-path"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "1) Ein Bild oder Video steht zunächst klein im Layout, etwa mit 30 bis 40 % Breite zwischen zwei Wörtern einer Headline oder als Kachel einer Galerie. 2) Die Section wird gepinnt (sticky). 3) Beim Scrollen wächst das Medium auf volle Viewportgröße, der Eckenradius geht auf 0, die umgebende Typo fährt seitlich weg. 4) Am Ende steht das Medium randlos, die nächste Section setzt darunter an.",
  "warum_es_wirkt": "Klarer Übergang von Überblick zu Eintauchen. Der Nutzer zieht das Bild selbst heran, wie bei einem Kamera-Zoom: Kontrolle und Spannungsaufbau in einem. Typo-Hero und Bild-Hero verbinden sich in einer Bewegung.",
  "wann_einsetzen": "Erster Übergang vom Typo-Hero zum Showreel, Produktenthüllung, Einstieg in eine Fallstudie, Architektur- und Fotoportfolios.",
  "wann_nicht": "Wenn das Medium wenig Auflösung hat oder im Vollbild nicht trägt. Auf Seiten ohne starkes Bildmaterial, auf sehr kurzen Seiten und nicht mehrfach auf derselben Seite.",
  "varianten": [
   "Bild zwischen zwei Headline-Wörtern, die auseinanderfahren",
   "Aus der Galerie: eine Kachel wächst, die Nachbarkacheln weichen aus",
   "Zoom-out: das Vollbild schrumpft zur Karte",
   "Bild in Typografie: Text als Maske, die sich öffnet",
   "Gerahmtes Video im Hero öffnet sich beim ersten Scrollen; Ton erst im Vollbild mit Hinweis",
   "Scrollytelling-Intro mit Zoom durch ein Fenster oder Objekt"
  ],
  "umsetzung": "Pin-Container 200 bis 300vh hoch, innen eine sticky Bühne mit 100svh. Das Medium in Endgröße (100vw × 100svh) positionieren und nur beschneiden oder skalieren, nie width/height animieren. Clip-Path: inset(a b round 1rem) → inset(0 round 0), dazu das innere <img>/<video> gegenläufig von scale 1,2 auf 1. Scale: Start mit scale(0,22 bis 0,35), border-radius durch scale teilen, damit die Ecke optisch gleich bleibt. Kurve immer linear (scrub). GSAP: Timeline mit scrollTrigger { pin: true, scrub: true, end: '+=150%' }, Headline-Wörter gleichzeitig per xPercent nach außen. CSS-only geht mit animation-timeline: view() und animation-range: contain 0% contain 100% (Chrome, Safari 26+); Firefox bekommt den statischen Endzustand. Text nie mitskalieren, sonst wird er unscharf. Video: preload=\"metadata\" und poster setzen.",
  "mobil": "Im Hochformat breiter starten (60 bis 80 %), kürzere Pin-Strecke, Wörter über und unter dem Bild statt daneben. Video gegebenenfalls durch ein Standbild ersetzen. Alternativ ohne Pin als einfache Einblendung.",
  "reduzierte_bewegung": "Medium direkt in Endgröße zeigen, ohne Pinning. Headline als statischer Text darüber oder als Bildunterschrift.",
  "barrierefreiheit": "Headline als echter Text, getrennt vom Medium. Video nie automatisch mit Ton starten und eine Pause-Bedienung anbieten. Das Pinning darf keine Inhalte verdecken; die Bühne endet, bevor die nächste Section beginnt."
 },
 "messwerte": {
  "easing": "none (scrub)",
  "dauer_ms": "scrollgekoppelt",
  "stagger_ms": "",
  "distanz": "Radius 1rem → 0 (Fantasy)",
  "sonstiges": "Startgröße = Galerie-Kachel (’kin)",
  "herkunft": "beobachtet",
  "quelle": "https://www.fantasy.co/_nuxt/CD-pY35o.js"
 },
 "kurve": {
  "bezier": [
   0.25,
   0.1,
   0.25,
   1
  ],
  "css": "cubic-bezier(0.25, 0.1, 0.25, 1)",
  "name": "ease",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Olivier Larose – Zoom Parallax",
   "url": "https://blog.olivierlarose.com/tutorials/zoom-parallax",
   "auszeichnung": "",
   "beobachtung": "Verwandter Aufbau: 300vh Track, sticky 100vh, Medien skalieren bis Vollbild.",
   "art": "artikel"
  },
  {
   "seite": "Lusion",
   "url": "https://lusion.co",
   "auszeichnung": "Awwwards SOTD 02.10.2023 (v3), Developer Award 8,41",
   "beobachtung": "Hero mit ‚scroll to explore‘ und Play-Reel-Button; aus Erinnerung (unsicher) wächst das Reel beim Scrollen – im Browser prüfen.",
   "art": "website-ungeprueft",
   "browser_gemessen": true
  },
  {
   "seite": "Fantasy",
   "url": "https://www.fantasy.co/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (CD-pY35o.js): Storytelling-Sektion – GSAP Flip.from(absolute, simple, ease none) scrollgekoppelt (start top bottom, end bottom bottom, scrub), dazu clipPath inset(0 round 1rem) → round 0rem.",
   "art": "website"
  },
  {
   "seite": "’kin",
   "url": "https://by-kin.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (7712d15d8ce0b561.css): Reel auf gepinnter Bühne (.reel_inner height 100vh, sticky top 0, overflow hidden), Video startet in Galeriegröße (.reel_videoBox width/height var(--size-gallery-w/h)).",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Olivier Larose – Zoom Parallax",
   "url": "https://blog.olivierlarose.com/tutorials/zoom-parallax"
  },
  {
   "titel": "On-Scroll Expanding Image Animation within Typography (Codrops)",
   "url": "https://tympanus.net/codrops/2024/04/02/on-scroll-expanding-image-animation-within-typography/"
  },
  {
   "titel": "A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view() (Codrops)",
   "url": "https://tympanus.net/codrops/2024/01/17/a-practical-introduction-to-scroll-driven-animations-with-css-scroll-and-view/"
  }
 ],
 "kombinierbar_mit": [
  "pinned-scrub-scrollytelling",
  "zoom-parallax",
  "section-overlap-uebergang",
  "schrift-hero-viewportbreit",
  "cinematic-video-hero",
  "typo-maske-medien"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/medien-expansion-scroll/demo"
 },
 "herkunft": {
  "quelldateien": [
   "scroll.json",
   "layouts.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Zwei Produktionsbelege; Awwwards-Inspirationen entfernt (Lusion bleibt ungeprüft)."
  ],
  "zusammengelegt_aus": [
   "bild-waechst-fullscreen",
   "medien-expansion-scroll"
  ],
  "querverweis_kategorien": [
   "Hero & Section-Layouts"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein kleines Bild zwischen zwei Wörtern wächst beim Scrollen zum randlosen Vollbild, die Wörter weichen der Kante aus.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "linear (scrub, ease none): der Scroll ist die Zeit",
   "spur": "300vh Spur, innen sticky 100svh; Expansion über 80 % der Strecke, danach steht das Vollbild",
   "start_woerter": "Desktop 34 % Viewportbreite, Höhe Breite / 1,5 · ≤ 640 px: 72 % Breite, Höhe min(Breite × 1,25, 52 % Viewporthöhe)",
   "clip_path": "inset(a b round 16px) → inset(0 round 0); a, b in px aus Start- und Viewportgröße",
   "radius": "16px (1rem) → 0",
   "bild": "inneres Bild scale 1,2 → 1, gegenläufig",
   "woerter": "folgen der wachsenden Kante (Abstand 24 px) und fahren zusätzlich bis ±60 % ihrer Breite (mobil: Höhe) nach außen",
   "galerie": "Medium in Endgröße, transform scale 0,22 → 1 (≤ 640 px: 0,5 → 1); border-radius 16px / scale; 8 Nachbarkacheln bleiben 24 px neben der Kante und blenden auf 30 % ab",
   "zoom_out": "gleiche Werte rückwärts: Expansion = 1 − Fortschritt",
   "bildunterschrift": "Deckkraft linear ab 82 % Expansion, voll bei 100 %",
   "ui": "150 ms linear"
  },
  "ausloeser": "scroll",
  "touch": "Gleiches Prinzip mit kürzerem Weg: Startbreite 72 %, Wörter stehen über und unter dem Bild und weichen nach oben und unten aus. Hochformatbild 4:5 per picture. Galerie startet mit scale 0,5, die Nachbarn sind nur als Streifen sichtbar.",
  "reduziert": "Kein Pinning, keine Expansion: das Bild steht sofort randlos in Endgröße mit Bildunterschrift und blendet in 250 ms ein. Headline-Wörter, Kacheln und Wertanzeige entfallen.",
  "korrekturen": {
   "beschreibung": "1) Ein Bild oder Video steht zunächst klein im Layout, etwa mit 30 bis 40 % Breite zwischen zwei Wörtern einer Headline oder als Kachel einer Galerie. 2) Die Section wird gepinnt (sticky). 3) Beim Scrollen wächst das Medium auf volle Viewportgröße, der Eckenradius geht auf 0, die umgebende Typo fährt seitlich weg. 4) Am Ende steht das Medium randlos, die nächste Section setzt darunter an.",
   "warum_es_wirkt": "Klarer Übergang von Überblick zu Eintauchen. Der Nutzer zieht das Bild selbst heran, wie bei einem Kamera-Zoom: Kontrolle und Spannungsaufbau in einem. Typo-Hero und Bild-Hero verbinden sich in einer Bewegung.",
   "wann_einsetzen": "Erster Übergang vom Typo-Hero zum Showreel, Produktenthüllung, Einstieg in eine Fallstudie, Architektur- und Fotoportfolios.",
   "wann_nicht": "Wenn das Medium wenig Auflösung hat oder im Vollbild nicht trägt. Auf Seiten ohne starkes Bildmaterial, auf sehr kurzen Seiten und nicht mehrfach auf derselben Seite.",
   "varianten": [
    "Bild zwischen zwei Headline-Wörtern, die auseinanderfahren",
    "Aus der Galerie: eine Kachel wächst, die Nachbarkacheln weichen aus",
    "Zoom-out: das Vollbild schrumpft zur Karte",
    "Bild in Typografie: Text als Maske, die sich öffnet",
    "Gerahmtes Video im Hero öffnet sich beim ersten Scrollen; Ton erst im Vollbild mit Hinweis",
    "Scrollytelling-Intro mit Zoom durch ein Fenster oder Objekt"
   ],
   "umsetzung": "Pin-Container 200 bis 300vh hoch, innen eine sticky Bühne mit 100svh. Das Medium in Endgröße (100vw × 100svh) positionieren und nur beschneiden oder skalieren, nie width/height animieren. Clip-Path: inset(a b round 1rem) → inset(0 round 0), dazu das innere <img>/<video> gegenläufig von scale 1,2 auf 1. Scale: Start mit scale(0,22 bis 0,35), border-radius durch scale teilen, damit die Ecke optisch gleich bleibt. Kurve immer linear (scrub). GSAP: Timeline mit scrollTrigger { pin: true, scrub: true, end: '+=150%' }, Headline-Wörter gleichzeitig per xPercent nach außen. CSS-only geht mit animation-timeline: view() und animation-range: contain 0% contain 100% (Chrome, Safari 26+); Firefox bekommt den statischen Endzustand. Text nie mitskalieren, sonst wird er unscharf. Video: preload=\"metadata\" und poster setzen.",
   "mobil": "Im Hochformat breiter starten (60 bis 80 %), kürzere Pin-Strecke, Wörter über und unter dem Bild statt daneben. Video gegebenenfalls durch ein Standbild ersetzen. Alternativ ohne Pin als einfache Einblendung.",
   "reduzierte_bewegung": "Medium direkt in Endgröße zeigen, ohne Pinning. Headline als statischer Text darüber oder als Bildunterschrift.",
   "barrierefreiheit": "Headline als echter Text, getrennt vom Medium. Video nie automatisch mit Ton starten und eine Pause-Bedienung anbieten. Das Pinning darf keine Inhalte verdecken; die Bühne endet, bevor die nächste Section beginnt."
  },
  "geprueft": "31.10.2026",
  "notiz": "Fallstudie eines erfundenen Kölner Editorial-Studios (Studio Falz, Magazin Gefüge). Drei Varianten per Umschalter: Zwischen Wörtern (clip-path), Aus der Galerie (scale, Nachbarn weichen aus, wie Fantasy/’kin), Zoom-out. Vanilla JS, keine Bibliothek: Fortschritt aus getBoundingClientRect der Spur, Werte live oben links. Die Vorführung scrollt selbst durch die Spur und zurück, in der Galerie-Vorschau wechselt je Runde die Variante. Bedienelemente mit mix-blend-mode: difference, damit sie auf dunklem Grund und hellem Bild lesbar bleiben. Bilder 01.11.2026: eigene Bilder statt Portfolio."
 }
}