{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "section-overlap-uebergang",
 "name": "Sections, die übereinander gleiten (Vorhang-Übergang)",
 "name_en": "Overlapping section transition / curtain scroll",
 "kurz": "Die aktuelle Section bleibt sticky stehen, die nächste fährt darüber, die alte tritt zurück: Kapitelwechsel mit Tiefe statt harter Kante.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "filmisch"
 ],
 "stimmung_roh": [
  "filmisch",
  "räumlich",
  "modern"
 ],
 "technik": [
  "css",
  "scroll-driven-css",
  "gsap",
  "scrolltrigger"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Die aktuelle Section wird sticky (top: 0) und bleibt stehen. Die nächste fährt von unten über sie. Dabei tritt die alte zurück: Sie skaliert auf etwa 0,8, dreht sich leicht (−5°) und dunkelt ab. Die neue kann eine Gegenbewegung machen (Rotation +5° → 0, Scale 0,8 → 1) oder mit gerundeter Oberkante kommen, die beim Ankommen flach wird.",
  "warum_es_wirkt": "Sections werden zu Ebenen, die sich übereinanderlegen. Der Wechsel hat Tiefe und Rhythmus statt einer harten Kante. So entsteht Kapitelgefühl ohne gepinnte Timeline.",
  "wann_einsetzen": "Zwischen Hero und Inhalt, zwischen Kapiteln einer Story oder Fallstudien, vor dem Footer.",
  "wann_nicht": "Wenn am unteren Rand der alten Section noch Inhalt gelesen werden muss. Bei Sections, die höher als der Viewport sind: Dort bleibt nur das untere Ende stehen. Dann top auf einen negativen Wert setzen (Section-Höhe minus Viewport-Höhe).",
  "varianten": [
   "Perspektive: alte Section skaliert und dreht sich weg, neue kommt mit Gegenbewegung",
   "Abdunkeln: alte Section dunkelt ab und schrumpft kaum (Blur möglich, aber teuer)",
   "Runde Kante: neue Section kommt mit großer gerundeter Oberkante, die beim Ankommen flach wird",
   "SVG-Maske: eine Form öffnet die neue Section",
   "Animation der Sticky-Section beim Verlassen des Viewports (Codrops „Sticky Sections“)"
  ],
  "umsetzung": "Alle Sections position: sticky; top: 0; height: 100svh. Spätere Sections liegen im DOM weiter hinten und damit oben. Den Fortschritt der neuen Section aus ihrer Oberkante berechnen (0 am unteren Rand, 1 oben) und als CSS-Variable setzen; die alte Section liest denselben Wert. Rein in CSS geht es mit Scroll-driven Animations: Die nächste Section bekommt eine benannte View-Timeline (view-timeline: --s2; timeline-scope: --s2 am gemeinsamen Elternelement), die alte animiert ihr Inneres darauf: animation: recede linear both; animation-timeline: --s2; animation-range: entry 0% entry 100%; @keyframes recede { to { scale: .8; rotate: -5deg } }. Die eigene view()-Timeline der Sticky-Section taugt dafür nicht, weil sie sich beim Kleben nicht bewegt. Mit GSAP: ScrollTrigger mit trigger: nextSection, start: 'top bottom', end: 'top top', scrub: true, animiert prevSection.inner. Fallstricke: overflow: hidden auf body oder einem Elternelement bricht sticky, overflow: clip nutzen. filter: blur auf großen Flächen ist teuer, lieber ein schwarzes Overlay mit Opacity.",
  "mobil": "Gut geeignet. Rotation weglassen, Scale auf 0,9 abschwächen, gerundete Kante flacher halten.",
  "reduzierte_bewegung": "Nur die Sticky-Überlagerung ohne Scale und Rotation, oder normaler Fluss.",
  "barrierefreiheit": "Eine ganz verdeckte Section darf keine fokussierbaren Elemente behalten. Sobald sie vollständig überdeckt ist, inert setzen und ausblenden (visibility: hidden). Jede Section bekommt eine Überschrift oder ein aria-label, damit die Kapitel per Screenreader auffindbar sind."
 },
 "messwerte": {
  "easing": "linear (scroll-gekoppelt)",
  "dauer_ms": "",
  "stagger_ms": "",
  "distanz": "scale 1 → 0,8; rotate 0 → −5°",
  "sonstiges": "Container 200vh für zwei Sections",
  "herkunft": "beobachtet",
  "quelle": "https://blog.olivierlarose.com/tutorials/perspective-section-transition"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Olivier Larose – Perspective Section Transition",
   "url": "https://blog.olivierlarose.com/tutorials/perspective-section-transition",
   "auszeichnung": "",
   "beobachtung": "200vh-Container, erste Section sticky; scale 1 → 0,8 und rotate 0 → −5° über die Container-Progress; zweite Section umgekehrt.",
   "art": "artikel"
  },
  {
   "seite": "Codrops Demo „Sticky Sections“ (Manoela Ilic)",
   "url": "https://tympanus.net/Development/StickySections/",
   "auszeichnung": "",
   "beobachtung": "Sechs Sections (The Algorithm, The Dogma …) – laut Codrops-Teaser Animationen von Sticky-Sections beim Verlassen des Viewports (Demo geöffnet).",
   "art": "demo"
  },
  {
   "seite": "Olivier Larose – Mask Section Transition",
   "url": "https://blog.olivierlarose.com/tutorials/mask-section-transition",
   "auszeichnung": "",
   "beobachtung": "SVG-Masken-Variante, inspiriert von axelvanhessche.com.",
   "art": "artikel"
  },
  {
   "seite": "Antinomy Studio",
   "url": "https://www.antinomy.studio/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): Hero-Section mit doppelter Höhe (h-[calc(var(--height)+var(--height))], --height 31rem) und negativem margin-bottom; Inhalt darin sticky top-0, der Folgeinhalt (main, deckender Hintergrund) schiebt sich darüber.",
   "art": "website"
  },
  {
   "seite": "Locomotive – Case Study K72",
   "url": "https://locomotive.ca/en/work/k72",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (main.css): .c-work-single-pitch_wrapper clip-path polygon(0 0,100% 0,100% 50%,0 50%), height 200vh, margin-bottom -100vh, Sticky-Fläche min-height 200vh – die nächste Sektion überlappt die stehende Pitch-Sektion.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Olivier Larose – Perspective Section Transition",
   "url": "https://blog.olivierlarose.com/tutorials/perspective-section-transition"
  },
  {
   "titel": "Olivier Larose – Mask Section Transition",
   "url": "https://blog.olivierlarose.com/tutorials/mask-section-transition"
  }
 ],
 "kombinierbar_mit": [
  "theme-farbwechsel-scroll",
  "footer-reveal",
  "stapelkarten"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/section-overlap-uebergang/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/section-overlap-uebergang/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/section-overlap-uebergang/demo"
 },
 "herkunft": {
  "quelldateien": [
   "scroll.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Zwei Produktionsbelege (CSS-sticky-Varianten ohne Scale/Rotate)."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die aktuelle Section bleibt sticky stehen, die nächste fährt darüber, die alte tritt zurück: Kapitelwechsel mit Tiefe statt harter Kante.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "linear, an den Scroll gekoppelt (kein Zeit-Easing)",
   "strecke": "100svh je Übergang: Oberkante der neuen Section vom unteren Rand (0) bis oben (1)",
   "aufbau": ".kapitel { position: sticky; top: 0; height: 100svh } · letzte Section relative · Fortschritt per getBoundingClientRect als --ein/--aus",
   "perspektive": "alt: scale 1 → 0,8, rotate 0 → −5°, Abdunkeln 0 → 0,5 · neu: scale 0,8 → 1, rotate +5° → 0",
   "abdunkeln": "alt: scale 1 → 0,95, Abdunkeln 0 → 0,7 · neu ohne Gegenbewegung",
   "runde_kante": "neu: border-top-left/right-radius 50% / 22vh → 0 · alt: Abdunkeln 0 → 0,45",
   "abdunkeln_technik": "Overlay ::after #000, opacity = Wert × --aus (statt filter: brightness/blur)",
   "schatten_neue_section": "box-shadow 0 -24px 60px -12px rgba(0,0,0,.45)",
   "telefon_bis_760px": "Perspektive ohne Rotation, scale 1 → 0,9 bzw. 0,9 → 1; Runde Kante 50% / 12vh",
   "verdeckt": "bei --aus ≥ 0,999: visibility hidden + inert",
   "transform_origin": "Mitte (Standard)",
   "vorfuehrung": "1000 ms Halt, je Kapitel 2200 ms Scroll (Sinus-in-out, nur die gedachte Hand) + 600 ms Halt; jede Runde nächste Variante",
   "ui": "Umschalter 150 ms linear"
  },
  "ausloeser": "scroll",
  "touch": "Gleiches Verhalten beim Wischen; unter 760 px ohne Rotation und mit Scale 0,9, Runde Kante 12vh. Umschalter und kurze Werte-Zeile unten, Knöpfe 32 px hoch.",
  "reduziert": "Nur die Sticky-Überlagerung mit Abdunkeln bleibt; kein Scale, keine Rotation, keine Rundung.",
  "korrekturen": {
   "beschreibung": "Die aktuelle Section wird sticky (top: 0) und bleibt stehen. Die nächste fährt von unten über sie. Dabei tritt die alte zurück: Sie skaliert auf etwa 0,8, dreht sich leicht (−5°) und dunkelt ab. Die neue kann eine Gegenbewegung machen (Rotation +5° → 0, Scale 0,8 → 1) oder mit gerundeter Oberkante kommen, die beim Ankommen flach wird.",
   "warum_es_wirkt": "Sections werden zu Ebenen, die sich übereinanderlegen. Der Wechsel hat Tiefe und Rhythmus statt einer harten Kante. So entsteht Kapitelgefühl ohne gepinnte Timeline.",
   "wann_einsetzen": "Zwischen Hero und Inhalt, zwischen Kapiteln einer Story oder Fallstudien, vor dem Footer.",
   "wann_nicht": "Wenn am unteren Rand der alten Section noch Inhalt gelesen werden muss. Bei Sections, die höher als der Viewport sind: Dort bleibt nur das untere Ende stehen. Dann top auf einen negativen Wert setzen (Section-Höhe minus Viewport-Höhe).",
   "varianten": [
    "Perspektive: alte Section skaliert und dreht sich weg, neue kommt mit Gegenbewegung",
    "Abdunkeln: alte Section dunkelt ab und schrumpft kaum (Blur möglich, aber teuer)",
    "Runde Kante: neue Section kommt mit großer gerundeter Oberkante, die beim Ankommen flach wird",
    "SVG-Maske: eine Form öffnet die neue Section",
    "Animation der Sticky-Section beim Verlassen des Viewports (Codrops „Sticky Sections“)"
   ],
   "umsetzung": "Alle Sections position: sticky; top: 0; height: 100svh. Spätere Sections liegen im DOM weiter hinten und damit oben. Den Fortschritt der neuen Section aus ihrer Oberkante berechnen (0 am unteren Rand, 1 oben) und als CSS-Variable setzen; die alte Section liest denselben Wert. Rein in CSS geht es mit Scroll-driven Animations: Die nächste Section bekommt eine benannte View-Timeline (view-timeline: --s2; timeline-scope: --s2 am gemeinsamen Elternelement), die alte animiert ihr Inneres darauf: animation: recede linear both; animation-timeline: --s2; animation-range: entry 0% entry 100%; @keyframes recede { to { scale: .8; rotate: -5deg } }. Die eigene view()-Timeline der Sticky-Section taugt dafür nicht, weil sie sich beim Kleben nicht bewegt. Mit GSAP: ScrollTrigger mit trigger: nextSection, start: 'top bottom', end: 'top top', scrub: true, animiert prevSection.inner. Fallstricke: overflow: hidden auf body oder einem Elternelement bricht sticky, overflow: clip nutzen. filter: blur auf großen Flächen ist teuer, lieber ein schwarzes Overlay mit Opacity.",
   "mobil": "Gut geeignet. Rotation weglassen, Scale auf 0,9 abschwächen, gerundete Kante flacher halten.",
   "reduzierte_bewegung": "Nur die Sticky-Überlagerung ohne Scale und Rotation, oder normaler Fluss.",
   "barrierefreiheit": "Eine ganz verdeckte Section darf keine fokussierbaren Elemente behalten. Sobald sie vollständig überdeckt ist, inert setzen und ausblenden (visibility: hidden). Jede Section bekommt eine Überschrift oder ein aria-label, damit die Kapitel per Screenreader auffindbar sind."
  },
  "geprueft": "31.10.2026",
  "notiz": "Fünf Kapitel eines erfundenen Studios (Atelier Kranich): Hero, drei Arbeiten, Kontakt. Umschalter für drei Varianten (Perspektive, Abdunkeln, Runde Kante), Werte und Live-Fortschritt unten. Ohne Bibliothek: ein Scroll-Listener setzt --ein/--aus je Section, das CSS rechnet Scale, Rotation, Rundung und Overlay daraus. Die Vorführung scrollt Kapitel für Kapitel und wechselt jede Runde die Variante. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise je Kapitel angehoben: k2 .52 → .66, k3 .52 → .62, k4 (Blau) .6 → .74, k5 (Orange) .58 → .76, jeweils ≥ 4,5:1; Kontrastmodus-Rahmen für Knöpfe."
 }
}