{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "spalten-shutter-wipe",
 "name": "Spalten-, Streifen- und Jalousie-Wipe",
 "name_en": "Column / shutter / slices wipe",
 "kurz": "Fünf oder sechs Bahnen in Signalfarbe schließen gestaffelt über der Seite, setzen den Seitennamen zusammen und geben die neue Seite frei: als Spalten, Streifen oder Jalousie.",
 "kategorie": "Seitenübergänge",
 "kategorie_slug": "seitenuebergaenge",
 "kategorie_nr": 1,
 "bau_chat": "C3",
 "prioritaet": "B",
 "trendstatus": "etabliert",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "editorial",
  "präzise",
  "laut"
 ],
 "stimmung_roh": [
  "architektonisch",
  "rhythmisch",
  "editorial"
 ],
 "technik": [
  "gsap",
  "css",
  "barba",
  "astro-clientrouter"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Statt eines einzelnen Panels decken mehrere Bahnen die Seite: 4 bis 8 senkrechte Spalten oder waagerechte Streifen. Sie fahren gestaffelt ein, mit 40 bis 80 ms Versatz, von links nach rechts oder von der Mitte nach außen. Hinter den geschlossenen Bahnen wird der Inhalt getauscht. Dann fahren die Bahnen gestaffelt weiter und geben die neue Seite frei. Beim Zurück-Navigieren läuft alles in umgekehrter Richtung.",
  "warum_es_wirkt": "Der Stagger macht aus einer Fläche einen Rhythmus. Das wirkt gebaut und architektonisch. Liegen die Bahnen auf dem Spaltenraster der Seite, wird das Raster beim Seitenwechsel selbst sichtbar.",
  "wann_einsetzen": "Bei Seiten mit sichtbarem Spaltenraster: Architektur, Editorial, Mode, Agenturen. Und immer dann, wenn ein einzelnes Panel zu glatt wirkt.",
  "wann_nicht": "Bei sehr ruhigen, minimalen Marken: zu viel Unruhe. Bei häufigen, schnellen Wechseln wie Shop-Filtern oder Dashboards, weil jeder Wechsel die Seite kurz verdeckt.",
  "varianten": [
   "Senkrechte Spalten (columns): jede Spalte fährt per translateY ein und weiter nach oben weg.",
   "Waagerechte Streifen (slices): seitlich per translateX, oft von der Mitte nach außen.",
   "Jalousie (shutter): jede Spalte skaliert per scaleY, statt zu fahren. K72 schließt mit Ursprung unten und öffnet mit Ursprung oben.",
   "Spalten in Markenfarbe mit Richtungsumkehr bei Zurück (inside-out.tech)."
  ],
  "umsetzung": "Ein fixiertes Overlay mit N absolut positionierten Bahnen, Breite calc(100% / N + 1px). Schließen: gsap.fromTo(cols, { yPercent: 100 }, { yPercent: 0, stagger: { each: 0.045, from: 'start' } }). Öffnen: weiter auf yPercent: -100. Jalousie: scaleY 0 → 1 mit transform-origin bottom, zum Öffnen 1 → 0 mit origin top. K72 nutzt dafür CSS-Transitions: 0,3 s, cubic-bezier(.215,.61,.355,1), Delays 75, 120, 165, 210 und 255 ms. Ohne Bibliothek reicht element.animate() mit einem delay je Bahn. Im Router (Barba, Astro ClientRouter, Interlude) schließt der Leave-Hook die Bahnen, der Enter-Hook öffnet sie. Die Richtung bei Zurück über ein Flag umkehren (popstate oder Navigationstyp). Fallstrick: Subpixel-Lücken zwischen den Bahnen, deshalb 1 px Überlappung.",
  "mobil": "Spaltenzahl auf 3 bis 4 senken, sonst werden die Bahnen zu schmal. Die Dauern können bleiben.",
  "reduzierte_bewegung": "Sofortiger Wechsel (so bei inside-out.tech) oder ein kurzer Fade ohne Bahnen.",
  "barrierefreiheit": "Overlay mit aria-hidden. Nach dem Wechsel den Fokus auf die neue Hauptüberschrift setzen und den Seitentitel per aria-live ansagen, wie bei jedem JS-Router. Text auf der Bahnfarbe mit genug Kontrast setzen."
 },
 "messwerte": {
  "easing": "cubic-bezier(.215,.61,.355,1)",
  "dauer_ms": "300 je Spalte",
  "stagger_ms": "45",
  "distanz": "scaleY 0 → 1 (Ursprung unten, beim Öffnen oben)",
  "sonstiges": "5 Spalten im 20er-Raster; Overlay #1D1D1D .8",
  "herkunft": "beobachtet",
  "quelle": "https://k72.ca/assets/styles/main.css?v=20240527152606"
 },
 "kurve": {
  "bezier": [
   0.215,
   0.61,
   0.355,
   1.0
  ],
  "css": "cubic-bezier(0.215, 0.61, 0.355, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 300
 },
 "gesehen_bei": [
  {
   "seite": "inside-out.tech (Astro Build Club), Pull Request",
   "url": "https://github.com/astrobuildclub/inside-out.tech/pull/3",
   "auszeichnung": "",
   "beobachtung": "Interlude 'columns' ersetzt den alten Fortschrittsbalken: Balken in --lemon decken die Seite und fahren weiter nach oben, um die neue Seite freizugeben, bei Zurück-Navigation umgekehrt. Getestet sind auch Doppelklick, Mobile-Menü (schließt bei interlude:leave) und prefers-reduced-motion (sofortiger Wechsel).",
   "art": "demo"
  },
  {
   "seite": "Osmo Page Transition Course",
   "url": "https://www.osmo.supply/product/page-transition-course",
   "auszeichnung": "",
   "beobachtung": "Column Wipe als Kurs-Lektion, Shutter als Vorlage.",
   "art": "demo"
  },
  {
   "seite": "K72",
   "url": "https://k72.ca/",
   "auszeichnung": "Awwwards Site of the Day, Developer Award, Mobile Excellence; Idéa Gold (laut Locomotive-Case-Study https://locomotive.ca/en/work/k72)",
   "beobachtung": "Live geprüft: HTML .c-loader mit fünf .c-loader_col; main.css: scale3d(1,0,1) ↔ scale3d(1,1,1), transform-origin bottom/top, transition .3s cubic-bezier(.215,.61,.355,1), transition-delay .075/.12/.165/.21/.255s; Spaltenbreiten folgen dem 20-Spalten-Raster; Overlay :before #1D1D1D opacity .8.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Interlude: A Starter for Custom Page Transitions in Astro",
   "url": "https://tympanus.net/codrops/2026/10/07/interlude-astro-page-transitions/"
  }
 ],
 "kombinierbar_mit": [
  "vorhang-farbpanel-wipe",
  "richtungsbewusste-uebergaenge",
  "seitenname-typo-uebergang"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/seitenuebergaenge/spalten-shutter-wipe/",
  "meta": "https://cecodesign.de/lab/fundus/seitenuebergaenge/spalten-shutter-wipe/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/seitenuebergaenge/spalten-shutter-wipe/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Interlude-Demo durch K72 ersetzt."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Fünf oder sechs Bahnen in Signalfarbe schließen gestaffelt über der Seite, setzen den Seitennamen zusammen und geben die neue Seite frei: als Spalten, Streifen oder Jalousie.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "technik": "Web Animations API (element.animate mit delay je Bahn), Inhaltstausch hinter den geschlossenen Bahnen; Seiten als Zustände in einer Datei",
   "easing": "cubic-bezier(0.215, 0.61, 0.355, 1) (easeOutCubic, gemessen bei K72) für alle Bahnen, die neue Seite, die Hover-Fläche und den Text-Roll",
   "dauer_ms": "300 je Bahn",
   "erste_verzoegerung_ms": "75",
   "stagger_ms": "45",
   "halten_ms": "260 bei geschlossenen Bahnen (Inhaltstausch)",
   "bahnen": "Spalten 6 (Telefon bis 600 px: 4), Streifen 5, Jalousie 5 (Telefon: 4); Breite bzw. Höhe calc(100% / N + 1px), 1 px Überlappung gegen Subpixel-Lücken",
   "spalten": "translateY(100%) → translateY(0), öffnen translateY(0) → translateY(-100%); Reihenfolge links nach rechts; zurück: von oben (-100% → 0), raus nach unten (0 → 100%), rechts nach links",
   "streifen": "translateX(-100%) → translateX(0), öffnen translateX(0) → translateX(100%); Reihenfolge von der Mitte nach außen; zurück: von rechts (100% → 0), raus nach links",
   "jalousie": "scaleY(0) → scaleY(1) mit transform-origin 50% 100%, öffnen scaleY(1) → scaleY(0) mit 50% 0%; links nach rechts; zurück: Ursprünge getauscht, rechts nach links; Seitenname als eigene Ebene opacity 0 → 1 → 0, je 150 ms linear",
   "schliessen_gesamt_ms": "Spalten 600 (Telefon 510), Streifen 465, Jalousie 555 (Telefon 510); öffnen gleich lang",
   "seitenname": "in jeder Bahn (Spalten, Streifen) ein bildschirmgroßer Ausschnitt, um die eigene Position verschoben, sodass sich der Name aus den Bahnen zusammensetzt; TikTok Sans wdth 75, wght 800, clamp(76px, 16vw, 280px), #0b0b0b auf #ff5a1f",
   "scrim": "#1d1d1d, opacity 0 → 0.8 über die Schließdauer (wie K72), beim Tausch entfernt",
   "neue_seite": "Blöcke translateY(40px) → 0 und opacity 0 → 1, 600 ms, 45 ms Versatz je Block, startet mit dem Öffnen",
   "richtung_zurueck": "wenn das Ziel in der Seitenordnung (Start, Arbeiten, Projekt, Studio, Kontakt) vor der aktuellen Seite liegt oder der Link data-richtung=\"zurueck\" trägt",
   "raster": "sichtbare Linien im Abstand 100% / N, deckungsgleich mit den Bahnkanten (Streifen: waagerecht)",
   "farben": "Signal #ff5a1f (Bahnen, CTA, Hover-Fläche), #0b0b0b, #f2f2f2, Text #ffffff, Meta #8a8a8a",
   "schriften": "TikTok Sans wdth 75, wght 800, letter-spacing -0.03em, line-height 0.9 (Headlines); DM Mono 12px versal, +0.04em (Labels)",
   "ui": "Hover-Fläche der Indexzeilen scaleY 0 → 1, origin bottom, 300 ms; Text-Roll der Navigation translateY 105 %, 300 ms; Umschalter 150 ms linear",
   "reduziert": "keine Bahnen: Seite opacity 1 → 0, Tausch, 0 → 1, je 200 ms linear"
  },
  "ausloeser": "klick",
  "touch": "Tippen auf Navigation, Logo, Showreel, Indexzeile, „Alle Arbeiten“ oder „Nächstes Projekt“ löst den Wechsel aus. Bis 600 px Breite 4 statt 6 Spalten (Jalousie 4 statt 5), Dauern gleich. Indexzeilen zeigen ihre Daumenbilder immer, die Hover-Fläche erscheint beim Antippen. Umschalter mit 36 px hohen Knöpfen.",
  "reduziert": "Keine Bahnen und kein Scrim: Die Seite blendet in 200 ms linear aus, der Inhalt wird getauscht und blendet in 200 ms ein. Fokus auf die neue h1 und die aria-live-Ansage bleiben. Die Vorführung läuft mit diesem Fade.",
  "korrekturen": {
   "beschreibung": "Statt eines einzelnen Panels decken mehrere Bahnen die Seite: 4 bis 8 senkrechte Spalten oder waagerechte Streifen. Sie fahren gestaffelt ein, mit 40 bis 80 ms Versatz, von links nach rechts oder von der Mitte nach außen. Hinter den geschlossenen Bahnen wird der Inhalt getauscht. Dann fahren die Bahnen gestaffelt weiter und geben die neue Seite frei. Beim Zurück-Navigieren läuft alles in umgekehrter Richtung.",
   "warum_es_wirkt": "Der Stagger macht aus einer Fläche einen Rhythmus. Das wirkt gebaut und architektonisch. Liegen die Bahnen auf dem Spaltenraster der Seite, wird das Raster beim Seitenwechsel selbst sichtbar.",
   "wann_einsetzen": "Bei Seiten mit sichtbarem Spaltenraster: Architektur, Editorial, Mode, Agenturen. Und immer dann, wenn ein einzelnes Panel zu glatt wirkt.",
   "wann_nicht": "Bei sehr ruhigen, minimalen Marken: zu viel Unruhe. Bei häufigen, schnellen Wechseln wie Shop-Filtern oder Dashboards, weil jeder Wechsel die Seite kurz verdeckt.",
   "varianten": [
    "Senkrechte Spalten (columns): jede Spalte fährt per translateY ein und weiter nach oben weg.",
    "Waagerechte Streifen (slices): seitlich per translateX, oft von der Mitte nach außen.",
    "Jalousie (shutter): jede Spalte skaliert per scaleY, statt zu fahren. K72 schließt mit Ursprung unten und öffnet mit Ursprung oben.",
    "Spalten in Markenfarbe mit Richtungsumkehr bei Zurück (inside-out.tech)."
   ],
   "umsetzung": "Ein fixiertes Overlay mit N absolut positionierten Bahnen, Breite calc(100% / N + 1px). Schließen: gsap.fromTo(cols, { yPercent: 100 }, { yPercent: 0, stagger: { each: 0.045, from: 'start' } }). Öffnen: weiter auf yPercent: -100. Jalousie: scaleY 0 → 1 mit transform-origin bottom, zum Öffnen 1 → 0 mit origin top. K72 nutzt dafür CSS-Transitions: 0,3 s, cubic-bezier(.215,.61,.355,1), Delays 75, 120, 165, 210 und 255 ms. Ohne Bibliothek reicht element.animate() mit einem delay je Bahn. Im Router (Barba, Astro ClientRouter, Interlude) schließt der Leave-Hook die Bahnen, der Enter-Hook öffnet sie. Die Richtung bei Zurück über ein Flag umkehren (popstate oder Navigationstyp). Fallstrick: Subpixel-Lücken zwischen den Bahnen, deshalb 1 px Überlappung.",
   "mobil": "Spaltenzahl auf 3 bis 4 senken, sonst werden die Bahnen zu schmal. Die Dauern können bleiben.",
   "reduzierte_bewegung": "Sofortiger Wechsel (so bei inside-out.tech) oder ein kurzer Fade ohne Bahnen.",
   "barrierefreiheit": "Overlay mit aria-hidden. Nach dem Wechsel den Fokus auf die neue Hauptüberschrift setzen und den Seitentitel per aria-live ansagen, wie bei jedem JS-Router. Text auf der Bahnfarbe mit genug Kontrast setzen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Erfundenes Digitalstudio Kette & Schuss aus Bielefeld im Rezept kreativstudio-buehne (TikTok Sans wdth 75, DM Mono, Schwarz und Grau mit einer Signalfarbe). Fünf Seiten als Zustände in einer Datei, die Navigation simuliert den Seitenwechsel; im echten Einsatz laufen Schließen und Öffnen in den Leave- und Enter-Hooks eines Routers. Alle Varianten nutzen die K72-Messwerte (300 ms, 45 ms ab 75 ms, easeOutCubic, Scrim #1d1d1d .8); K72 ist zugleich Referenz des Rezepts, darum gibt es eine einzige Kurve. Bei Spalten und Streifen trägt jede Bahn ihren Ausschnitt des Seitennamens, bei der Jalousie wird er eingeblendet, weil scaleY die Schrift stauchen würde. Das sichtbare Raster liegt auf den Bahnkanten. Rückwärts in der Seitenordnung oder über „Alle Arbeiten“ kehren Richtung und Reihenfolge um. Neue Schriftdateien: tiktok-sans-latin-wdth-normal.woff2, dm-mono-latin-400-normal.woff2, dm-mono-latin-500-normal.woff2. AD-Review 01.11.2026: Note 4"
 }
}