{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "seite-schiebt-ueber-alte",
 "name": "Neue Seite schiebt sich über die alte (Stack / Slide-over mit Parallax)",
 "name_en": "Slide-over / stacked page transition with parallax",
 "kurz": "Die neue Seite gleitet wie ein Blatt über die alte, die alte weicht zurück und dunkelt ab: Tiefe statt Überblendung, gemessen bei COLLINS.",
 "kategorie": "Seitenübergänge",
 "kategorie_slug": "seitenuebergaenge",
 "kategorie_nr": 1,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "ruhig",
  "präzise",
  "luxuriös"
 ],
 "stimmung_roh": [
  "weich",
  "hochwertig",
  "app-artig"
 ],
 "technik": [
  "gsap",
  "barba",
  "view-transitions",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Die neue Seite fährt von unten herein, oft mit abgerundeten oberen Ecken wie eine Karte. Gleichzeitig weicht die alte Seite zurück: Sie skaliert leicht auf 0.9 bis 0.95 oder wandert langsamer nach oben (etwa -20 bis -30 %) und dunkelt auf 40 bis 60 % ab. Am Ende liegt die neue Seite plan, die Eckradien gehen auf 0. COLLINS kombiniert translateY(50 %) mit einem mitlaufenden clip-path: Die Kante fährt über den ganzen Viewport, der Inhalt nur halb so weit.",
  "warum_es_wirkt": "Tiefenstaffelung wie bei gestapelten Karten oder einem iOS-Sheet. Man sieht, dass die neue Seite über der alten liegt und wohin man zurückkehrt. Das wirkt physisch und hochwertig, ohne laut zu sein.",
  "wann_einsetzen": "Bei Produkt-, App-, Studio- und Kulturseiten mit klarer Hierarchie von Übersicht und Detail, etwa Programm und Veranstaltung oder Projektliste und Case Study.",
  "wann_nicht": "Bei rein typografischen oder brutalistischen Seiten und bei Navigationen auf gleicher Ebene (Reiter, Filter): Die Tiefe würde eine Hierarchie behaupten, die es nicht gibt.",
  "varianten": [
   "Stapel: neue Seite 50 % → 0 mit mitlaufendem Clip, alte skaliert auf 0.95 vor schwarzem Grund (COLLINS)",
   "Overlapping Parallax: neue Seite von ganz unten, alte weicht um etwa 25 % nach oben aus und dunkelt ab",
   "Slide-over seitlich: neue Seite von rechts, für horizontale Hierarchien",
   "Peel/Corner als 3D-Variante (siehe 3d-raum-uebergaenge)"
  ],
  "umsetzung": "Nativ mit View Transitions: @view-transition { navigation: auto; } in beiden Seiten. Dazu ::view-transition-image-pair(root) { background: #000 }, ::view-transition-old(root) und ::view-transition-new(root) mit mix-blend-mode: normal und eigenen Keyframes, etwa neu von translateY(50%) und clip-path: xywh(0 50% 100% 100% round 1.5rem) auf none, alt auf scale(.95) mit round 1rem, 450 ms cubic-bezier(.5,.3,0,1). Für Zurück eigene, gespiegelte Keyframes schreiben und ::view-transition-old(root) z-index: 1 geben, damit die obere Seite wieder abfährt. Die Richtung setzt man im MPA per viewTransition.types in pageswap/pagereveal. Mit JS-Router: den neuen Container fixed über den alten legen, beide tweenen, danach die Position zurücksetzen und scrollTo(0, 0). Fallstrick: Beim Fixieren muss die Scroll-Position der alten Seite erhalten bleiben (top: -scrollY). View Transitions lösen das von selbst, weil sie nur den sichtbaren Ausschnitt fotografieren.",
  "mobil": "Sehr natürlich, weil es dem Sheet-Muster mobiler Betriebssysteme entspricht. Nur transform, clip-path und opacity animieren, dann läuft es auch auf schwachen Geräten flüssig.",
  "reduzierte_bewegung": "Kein Weg und keine Skalierung. Die neue Seite blendet kurz über die stehende alte (etwa 200 ms), oder der Übergang entfällt ganz mit @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }.",
  "barrierefreiheit": "Normales Fokus-Management: Nach dem Wechsel den Fokus auf die h1 der neuen Seite setzen und den Seitentitel aktualisieren. Bei echten Seitenaufrufen bleibt beides nativ. Während der Animation ist die Pseudo-Ebene nicht bedienbar, deshalb den Übergang kurz halten."
 },
 "messwerte": {
  "easing": "cubic-bezier(.5,.3,0,1)",
  "dauer_ms": "450",
  "stagger_ms": "",
  "distanz": "neu: translateY 50 % → 0; alt: scale 1 → .95",
  "sonstiges": "abgerundete Kanten 1.5rem (neu) bzw. 1rem (alt), schwarzer Hintergrund dahinter",
  "herkunft": "beobachtet",
  "quelle": "https://www.wearecollins.com/_nuxt/entry.DdWfn7dd.css"
 },
 "kurve": {
  "bezier": [
   0.5,
   0.3,
   0.0,
   1.0
  ],
  "css": "cubic-bezier(0.5, 0.3, 0, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 450
 },
 "gesehen_bei": [
  {
   "seite": "Osmo Page Transition Course",
   "url": "https://www.osmo.supply/product/page-transition-course",
   "auszeichnung": "",
   "beobachtung": "Vorlagen 'Overlapping Parallax', 'Stacked Cards' und 'Side by Side'.",
   "art": "demo"
  },
  {
   "seite": "COLLINS",
   "url": "https://www.wearecollins.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (entry.DdWfn7dd.css): @keyframes newPage translateY(50%) + clip-path xywh(0 50% 100% 100% round 1.5rem) → 0; @keyframes oldPage scale(1) → scale(.95) mit round 1rem; .45s cubic-bezier(.5,.3,0,1); ::view-transition-image-pair(root) background #000 (Abdunkeln).",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Interlude: A Starter for Custom Page Transitions in Astro (Codrops)",
   "url": "https://tympanus.net/codrops/2026/10/07/interlude-astro-page-transitions/"
  }
 ],
 "kombinierbar_mit": [
  "richtungsbewusste-uebergaenge",
  "vt-cross-document-mpa"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seite-schiebt-ueber-alte/",
  "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seite-schiebt-ueber-alte/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/seitenuebergaenge/seite-schiebt-ueber-alte/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Interlude-Demo durch Collins ersetzt."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die neue Seite gleitet wie ein Blatt über die alte, die alte weicht zurück und dunkelt ab: Tiefe statt Überblendung, gemessen bei COLLINS.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "echter_einsatz": "@view-transition { navigation: auto; } in beiden Seiten (gleiche Origin); die ::view-transition-Regeln der Demo gelten unverändert",
   "easing": "cubic-bezier(0.5, 0.3, 0, 1) (gemessen bei COLLINS), in allen Varianten und Richtungen",
   "stapel_dauer_ms": 450,
   "stapel_neu": "transform translateY(50%) → none · clip-path xywh(0 50% 100% 100% round 1.5rem) → xywh(0 0 100% 100% round 0)",
   "stapel_alt": "transform none → scale(.95) · clip-path xywh(0 0 100% 100% round 0) → xywh(0 0 100% 100% round 1rem)",
   "stapel_grund": "::view-transition-image-pair(root) { background: #000 }",
   "parallax_dauer_ms": 600,
   "parallax_neu": "translateY(100%) → none · clip-path inset(0 round 1.5rem 1.5rem 0 0) → inset(0 round 0)",
   "parallax_alt": "translateY(0) → translateY(-25%) · filter brightness(1) → brightness(.5)",
   "seitlich_dauer_ms": 600,
   "seitlich_neu": "translateX(100%) → none · clip-path inset(0 round 1.5rem 0 0 1.5rem) → inset(0 round 0)",
   "seitlich_alt": "translateX(0) → translateX(-30%) · filter brightness(1) → brightness(.5)",
   "dauer_hinweis": "Parallax und Seitlich mit 600 statt 450 ms, weil der Weg der neuen Seite doppelt so lang ist (100 % statt 50 %); eigene Festlegung",
   "zurueck": "Spiegelbildliche Keyframes (nicht animation-direction: reverse, sonst kehrt sich auch die Kurve um); ::view-transition-old(root) bekommt z-index 1, damit die obere Seite wieder abfährt",
   "snapshots": "::view-transition-old/new(root) { mix-blend-mode: normal; animation-fill-mode: both }",
   "richtung": "data-richtung=\"vor\" | \"zurueck\" am <html>, im MPA besser viewTransition.types in pageswap/pagereveal",
   "scroll": "neue Seite beginnt oben, Zurück stellt die gemerkte Scroll-Position der Programmseite wieder her",
   "reduziert": "keine Wege, keine Skalierung: alte Seite steht, neue blendet opacity 0 → 1 in 200 ms linear ein",
   "ui_easing": "cubic-bezier(0.215, 0.61, 0.355, 1), 150 ms (Hover, Knöpfe; aus dem Rezept)",
   "hover_karte": "Plakat scale 1 → 1.03 in 250 ms cubic-bezier(0.215, 0.61, 0.355, 1)"
  },
  "ausloeser": "klick",
  "touch": "Tippen auf eine Programmkarte, auf Zurück oder auf Danach löst denselben Übergang aus; die Stapel-Variante wirkt auf dem Telefon wie ein Sheet des Betriebssystems. Unter 900 px ist die Navigation ausgeblendet, das Plakat steht über dem Titel (16:9), Blättern-Knöpfe 44 px hoch, kein Hover-Zoom. Der Umschalter zeigt nur Dauer und Kurve.",
  "reduziert": "Kein Weg, keine Skalierung, kein Abdunkeln: Die neue Seite blendet in 200 ms linear über die stehende alte. Der Umschalter ist abgeblendet, die Werte-Anzeige nennt das. Der Zeiger der Vorführung springt statt zu gleiten.",
  "korrekturen": {
   "beschreibung": "Die neue Seite fährt von unten herein, oft mit abgerundeten oberen Ecken wie eine Karte. Gleichzeitig weicht die alte Seite zurück: Sie skaliert leicht auf 0.9 bis 0.95 oder wandert langsamer nach oben (etwa -20 bis -30 %) und dunkelt auf 40 bis 60 % ab. Am Ende liegt die neue Seite plan, die Eckradien gehen auf 0. COLLINS kombiniert translateY(50 %) mit einem mitlaufenden clip-path: Die Kante fährt über den ganzen Viewport, der Inhalt nur halb so weit.",
   "warum_es_wirkt": "Tiefenstaffelung wie bei gestapelten Karten oder einem iOS-Sheet. Man sieht, dass die neue Seite über der alten liegt und wohin man zurückkehrt. Das wirkt physisch und hochwertig, ohne laut zu sein.",
   "wann_einsetzen": "Bei Produkt-, App-, Studio- und Kulturseiten mit klarer Hierarchie von Übersicht und Detail, etwa Programm und Veranstaltung oder Projektliste und Case Study.",
   "wann_nicht": "Bei rein typografischen oder brutalistischen Seiten und bei Navigationen auf gleicher Ebene (Reiter, Filter): Die Tiefe würde eine Hierarchie behaupten, die es nicht gibt.",
   "varianten": [
    "Stapel: neue Seite 50 % → 0 mit mitlaufendem Clip, alte skaliert auf 0.95 vor schwarzem Grund (COLLINS)",
    "Overlapping Parallax: neue Seite von ganz unten, alte weicht um etwa 25 % nach oben aus und dunkelt ab",
    "Slide-over seitlich: neue Seite von rechts, für horizontale Hierarchien",
    "Peel/Corner als 3D-Variante (siehe 3d-raum-uebergaenge)"
   ],
   "umsetzung": "Nativ mit View Transitions: @view-transition { navigation: auto; } in beiden Seiten. Dazu ::view-transition-image-pair(root) { background: #000 }, ::view-transition-old(root) und ::view-transition-new(root) mit mix-blend-mode: normal und eigenen Keyframes, etwa neu von translateY(50%) und clip-path: xywh(0 50% 100% 100% round 1.5rem) auf none, alt auf scale(.95) mit round 1rem, 450 ms cubic-bezier(.5,.3,0,1). Für Zurück eigene, gespiegelte Keyframes schreiben und ::view-transition-old(root) z-index: 1 geben, damit die obere Seite wieder abfährt. Die Richtung setzt man im MPA per viewTransition.types in pageswap/pagereveal. Mit JS-Router: den neuen Container fixed über den alten legen, beide tweenen, danach die Position zurücksetzen und scrollTo(0, 0). Fallstrick: Beim Fixieren muss die Scroll-Position der alten Seite erhalten bleiben (top: -scrollY). View Transitions lösen das von selbst, weil sie nur den sichtbaren Ausschnitt fotografieren.",
   "mobil": "Sehr natürlich, weil es dem Sheet-Muster mobiler Betriebssysteme entspricht. Nur transform, clip-path und opacity animieren, dann läuft es auch auf schwachen Geräten flüssig.",
   "reduzierte_bewegung": "Kein Weg und keine Skalierung. Die neue Seite blendet kurz über die stehende alte (etwa 200 ms), oder der Übergang entfällt ganz mit @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }.",
   "barrierefreiheit": "Normales Fokus-Management: Nach dem Wechsel den Fokus auf die h1 der neuen Seite setzen und den Seitentitel aktualisieren. Bei echten Seitenaufrufen bleibt beides nativ. Während der Animation ist die Pseudo-Ebene nicht bedienbar, deshalb den Übergang kurz halten."
  },
  "geprueft": "01.11.2026",
  "notiz": "Welt nach Rezept kultur-programm-haltung: erfundenes Kulturzentrum „Blauhalle, Kulturzentrum an der Blau, Ulm“ mit Novemberprogramm (sechs Programmpunkte, vier Sparten mit Farbe und Text-Label, Termine und Preise in IBM Plex Mono, Schibsted Grotesk 900 als Hausschrift, Atkinson Hyperlegible Next für Lesetext, Schwarz auf #efede9, sticky Kopf mit 1px Unterkante und Tickets-Knopf). Bilder sind eigene SVG-Plakate je Programmpunkt (Schallringe, Wasserlinien, Kontaktbogen, Projektionskegel, zwölf Bögen, Orgelpfeifen), die per slice in 4:3, 3:2 und 16:9 funktionieren. Inspiration aus dem Bildfundus (nur Prinzipien): hebbel-am-ufer-de, volksbuehne-berlin-de, schauspielhaus-ch-de, secession-at, berlinerfestspiele-de. Die Seiten sind Zustände derselben Datei mit Verlaufsstapel: Programm → Veranstaltung → Danach (stapelt weiter) → Zurück (spiegelbildlich, obere Seite fährt ab). document.startViewTransition ersetzt den Seitenaufruf, die ::view-transition-Regeln gelten 1:1 für @view-transition { navigation: auto; }. Ohne View-Transition-Unterstützung wechselt der Inhalt sofort. Umschalter Stapel/Parallax/Seitlich mit Werte-Anzeige, Esc geht eine Ebene zurück. Vorführung: gedachter Zeiger öffnet „Die Fischerinnen“, blättert zu „Ufer, unscharf“ und geht zweimal zurück; in der Galerie-Vorschau wechselt die Variante je Durchlauf. Nachgebessert: Veranstaltung „Nachtstrom“ heißt jetzt „Quellgeräusch“ (Nachtstrom kommt in zwei anderen Demos vor). AD-Review 01.11.2026: Note 4"
 }
}