{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "tiefenflug-galerie",
 "name": "Tiefenflug-Galerie",
 "name_en": "Depth flight gallery (scroll through images in 3D space)",
 "kurz": "Ausstellungsarchiv einer Iserlohner Kunsthalle als Gang durch die Tiefe: Beim Scrollen kommt eine Ausstellung nach der anderen nach vorn, eine Leiste nennt Sparte, Datum und Zähler.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "B",
 "trendstatus": "aufsteigend",
 "belegstatus": "teilbelegt",
 "website_belege": 1,
 "stimmung": [
  "editorial",
  "filmisch",
  "experimentell"
 ],
 "stimmung_roh": [
  "räumlich",
  "kuratiert",
  "experimentell"
 ],
 "technik": [
  "css",
  "scroll-driven-css",
  "@property",
  "position-sticky",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Die Bilder stehen hintereinander im Raum. Beim Scrollen fährt der Blick hindurch: Das vordere Bild wird groß und blendet aus, das nächste kommt aus der Tiefe nach vorn. Eine Bühne bleibt dabei stehen (position: sticky), nur die Tiefe ändert sich. Eine Leiste am Rand nennt Titel, Datum und Zähler des Bildes, das gerade vorn ist.",
  "warum_es_wirkt": "Ein Archiv wird zum Weg, den man abgeht. Die Tiefe ordnet die Bilder zeitlich (vorn das Neueste, hinten das Ältere), ohne dass man ein Raster lesen muss. Weil nur die Tiefe wechselt und der Rahmen stehen bleibt, bleibt die Orientierung erhalten.",
  "wann_einsetzen": "Ausstellungs- oder Projektarchiv, Lookbook, Werkschau mit 6 bis 20 Bildern, die man nacheinander erleben soll. Gut als ein besonderes Kapitel auf einer sonst ruhigen Seite.",
  "wann_nicht": "Shops, Immobilien, Hotels: Fotos sind im Anflug klein und perspektivisch verkürzt. Inhalte, die man vergleichen muss (Preise, Zimmer, Produkte). Mehr als eine solche Scroll-Bühne pro Seite. Fotografen-Seiten, bei denen das Werk nicht skaliert werden darf. Lange Programmlisten, die man schnell überfliegen will.",
  "varianten": [
   "Flug: Querformate wechseln links und rechts der Mitte, der Blick fliegt zwischen ihnen hindurch (Archiv)",
   "Achse: Hochformate auf der Mittelachse, ein Bild nach dem anderen, Titel groß dahinter (Lookbook, Werkschau)",
   "Wolke: mehrere kleine Bilder je Tiefenstufe verstreut (dichtes Studio-Archiv, ab etwa 30 Bildern eher three.js)",
   "Ansicht umschalten: Flug oder ruhiges Raster (für Tastatur, Vergleich und reduzierte Bewegung)"
  ],
  "umsetzung": "Ein hoher Abschnitt (Bildzahl × 85 svh) mit einer Bühne in position: sticky, darauf perspective: 1200px und transform-style: preserve-3d. Eine registrierte Zahl @property --p wird per animation-timeline: view() über den Abschnitt von 0 auf Bildzahl − 1 animiert. Jedes Bild rechnet daraus seinen Abstand d = p − i und setzt translate3d(x, y, d × 850px); die Deckkraft ergibt sich mit clamp() aus d (aus der Tiefe einblenden, kurz vor der Kamera ausblenden). Boden und Decke der Halle sind zwei um 90° gekippte Flächen mit einem Fugenraster aus Verläufen; ihre Querfugen liegen im Bildabstand und wandern mit --p, so liest man die Fahrt als Raum. Ohne Scroll-Timeline setzt ein kleines Skript --p beim Scrollen (rAF). Dasselbe Skript schreibt Titel, Datum und Zähler des vorderen Bildes in die Leiste und nimmt vorbeigeflogene Bilder aus dem Zeiger (pointer-events: none). Die Deckkraft liegt nur am Bild, nicht am Link, damit der versteckte Linktext lesbar bleibt. Jedes Bild ist ein echter Link; bekommt es den Fokus, scrollt die Seite an seine Stelle. Ein Umschalter Raum/Raster zeigt dieselben Links als ruhiges Raster. three.js erst ab etwa 30 Bildern.",
  "mobil": "Gleiche Bühne, Bilder schmaler (72 vw), seitlicher Versatz kleiner, 70 svh Scrollweg je Bild. Natives Wischen, kein Scroll-Kapern.",
  "reduzierte_bewegung": "Kein Flug: Die Bilder stehen als ruhiges Raster mit Bildunterschrift untereinander. Der Umschalter bietet dieselbe Ansicht für alle an.",
  "barrierefreiheit": "Jedes Bild ist ein Link mit Titel, Sparte und Datum im Linktext; bekommt ein Link den Fokus, scrollt die Seite an seine Stelle und das Bild steht vorn. Pfeiltasten springen zum nächsten oder vorigen Bild. Ein Klick auf ein hinteres Bild holt es erst nach vorn, ein Klick auf das vordere öffnet es. Vorbeigeflogene Bilder bekommen pointer-events: none. Die Leiste ist aria-hidden, weil die Links dieselben Angaben tragen. Ansicht Raster als gleichwertiger Weg ohne Bewegung (WCAG 2.3.3). Spartenfarbe nie allein, immer mit Text. Kein Scroll-Kapern, kein Autoplay; die Vorführung läuft nur in der Galerie-Vorschau."
 },
 "messwerte": {
  "easing": "linear (an den Scroll gekoppelt); Leiste und Umschalter cubic-bezier(0.25, 1, 0.5, 1)",
  "dauer_ms": "Leiste 250, Ansichtswechsel 300",
  "stagger_ms": "",
  "distanz": "1000 px Tiefe je Bild (Telefon 900 px), perspective 1200 px (Telefon 900 px), 85 svh Scrollweg je Bild (Telefon 70 svh), seitlicher Versatz ±22–25 vw",
  "sonstiges": "Einblenden zwischen d = −4,5 und −3,5, Ausblenden zwischen d = 0,15 und 0,5. Kurve aus dem Rezept kultur-programm-haltung (token-swiss-knackig).",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept kultur-programm-haltung"
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 250
 },
 "gesehen_bei": [
  {
   "seite": "Slider Revolution: Spatial Scenes Add-on",
   "url": "https://www.sliderrevolution.com/addons/spatial-scenes/",
   "auszeichnung": "",
   "beobachtung": "Produktseite (abgerufen 02.11.2026): Eine Ebene wird zum 3D-Raum, durch den der Scroll fährt. Vier Galerie-Ansichten, darunter „Depth Flight“, bis zu 96 eigene Bilder, 43 Presets. Bedienung per Ziehen, Scroll, Wischen und Tastatur; ein Klick holt ein Bild nach vorn; je Bild Titel, Kategorie, Beschreibung und Link. Nur das Prinzip ist übernommen, kein Code und keine Vorlage.",
   "art": "website"
  },
  {
   "seite": "Framer Marketplace: 3D Media Corridor (Pixels in Play)",
   "url": "https://www.framer.com/marketplace/components/3d-media-corridor/",
   "auszeichnung": "",
   "beobachtung": "Scroll-gesteuerte 3D-Galerie: Bilder starten an einem Fluchtpunkt, verteilen sich zu einem Korridor und kommen mit Tiefe, Maßstab und Perspektive auf den Betrachter zu. Einstellbar sind Abstand, Tiefe, Perspektive, Easing und Deckkraft.",
   "art": "demo"
  },
  {
   "seite": "Framer Marketplace: Flying 3D Gallery",
   "url": "https://marketplace.development.framer.com/marketplace/components/flying-3d-gallery",
   "auszeichnung": "",
   "beobachtung": "Zehn Bilder fliegen abwechselnd links und rechts durch den Raum nach vorn, mit Perspektive und Deckkraft-Übergängen; Steuerung über CSS-Variablen --translate-z, --duration, --count. Läuft von selbst, nicht am Scroll; Hover hält ein Bild an.",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Google Codelab: Get started with scroll-driven animations in CSS",
   "url": "https://codelabs.developers.google.com/scroll-driven-animations"
  },
  {
   "titel": "MDN: animation-timeline",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline"
  }
 ],
 "kombinierbar_mit": [
  "css-view-reveal-nativ",
  "galerie-shared-element-vollbild",
  "scroll-fortschritt",
  "scrollspy-kapitelnavigation",
  "token-swiss-knackig"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/tiefenflug-galerie/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/tiefenflug-galerie/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/tiefenflug-galerie/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Buttons/SR-Recherche 02.11.2026"
  ],
  "pruefnotizen": [
   "02.11.2026: Prinzip aus Slider Revolution Spatial Scenes („Depth Flight“) und zwei Framer-Komponenten belegt. Keine Produktionsseite einer Kulturinstitution oder eines Studios mit diesem Muster gemessen; Beleg auf einer echten Website steht aus.",
   "Codrops-Artikel zu 3D-Scroll-Galerien (2026) per Suche gefunden, aber nicht abrufbar; deshalb nicht als Beleg geführt."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ausstellungsarchiv einer Iserlohner Kunsthalle als Gang durch die Tiefe: Beim Scrollen kommt eine Ausstellung nach der anderen nach vorn, eine Leiste nennt Sparte, Datum und Zähler.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "perspective": "1200px (Telefon 900px), perspective-origin 50% 46%",
   "tiefe_je_bild_px": "850 (Telefon 800)",
   "scrollweg_je_bild": "85svh (Telefon 70svh); Abschnitt = 100svh − Kopf + 7 × Weg",
   "fortschritt": "@property --p <number> 0 → 7 per animation-timeline: view() (--strecke), animation-range contain 0% contain 100%; ohne Scroll-Timeline per Skript (rAF)",
   "abstand": "d = p − i; z = min(d, .6) × Tiefe",
   "deckkraft_bild": "clamp(0, d + 4.5, 1) × clamp(0, (.5 − d) / .35, 1), nur am Bild",
   "versatz_flug": "x ±22–25vw abwechselnd, y −9 bis +9vh; Telefon x ±10–12vw, y +9vh",
   "einstieg_schub": "24vw × clamp(0, 1 − p × 1.25, 1) für alle Bilder außer dem ersten; Einstieg opacity 1 − p × 2.2, translate y −40px × p",
   "breite_karte": "min(40vw, 640px), 3:2, Schatten 0 30px 60px −20px rgba(11,11,11,.35); Telefon 72vw",
   "vorbei_ab": "d > .3 → pointer-events: none",
   "leiste_wechsel": "aus 150 ms cubic-bezier(0.5, 0, 0.75, 0), ein 250 ms cubic-bezier(0.25, 1, 0.5, 1), 6px",
   "easing": "cubic-bezier(0.25, 1, 0.5, 1)",
   "ui_dauer_ms": 250,
   "raster": "repeat(auto-fill, minmax(min(300px, 100%), 1fr)), gap 40px 24px, Einblenden 300 ms",
   "vorfuehrung": "Selbst-Scroll durch die Strecke, Runde 15 s, Kosinus-Verlauf",
   "farben": "#efede9 Grund, #0b0b0b Text, Sparten #c4421a / #3d5f9a / #2f7d4a / #b0186b nur als Quadrat neben Text",
   "hallenraster": "Boden und Decke als Ebenen mit rotateX(−90deg) (Boden 34vh unter, Decke 44vh über der Mitte; Telefon 24vh): Längsfugen alle 160 px (2 px, Alpha .2), Querfugen im Bildabstand (3 px, Alpha .5), background-position = (−p + .5) × Tiefe, damit die Fugen mit den Bildern auf die Kamera zukommen; Maske blendet nah und fern aus; Decke Deckkraft .5; im Raster ausgeblendet"
  },
  "ausloeser": "scroll",
  "touch": "Natives Wischen fährt durch den Raum, kein Scroll-Kapern; Bilder 72 vw, kleiner Versatz, Umschalter Raum/Raster unten rechts über der Leiste.",
  "reduziert": "Startet in der Ansicht Raster: alle Ausstellungen als ruhiges Raster mit Titel, Sparte und Datum, keine Übergänge. Raum bleibt als bewusste Wahl im Umschalter.",
  "korrekturen": {
   "umsetzung": "Ein hoher Abschnitt (Bildzahl × 85 svh) mit einer Bühne in position: sticky, darauf perspective: 1200px und transform-style: preserve-3d. Eine registrierte Zahl @property --p wird per animation-timeline: view() über den Abschnitt von 0 auf Bildzahl − 1 animiert. Jedes Bild rechnet daraus seinen Abstand d = p − i und setzt translate3d(x, y, d × 850px); die Deckkraft ergibt sich mit clamp() aus d (aus der Tiefe einblenden, kurz vor der Kamera ausblenden). Boden und Decke der Halle sind zwei um 90° gekippte Flächen mit einem Fugenraster aus Verläufen; ihre Querfugen liegen im Bildabstand und wandern mit --p, so liest man die Fahrt als Raum. Ohne Scroll-Timeline setzt ein kleines Skript --p beim Scrollen (rAF). Dasselbe Skript schreibt Titel, Datum und Zähler des vorderen Bildes in die Leiste und nimmt vorbeigeflogene Bilder aus dem Zeiger (pointer-events: none). Die Deckkraft liegt nur am Bild, nicht am Link, damit der versteckte Linktext lesbar bleibt. Jedes Bild ist ein echter Link; bekommt es den Fokus, scrollt die Seite an seine Stelle. Ein Umschalter Raum/Raster zeigt dieselben Links als ruhiges Raster. three.js erst ab etwa 30 Bildern."
  },
  "geprueft": "02.11.2026",
  "notiz": "Rezept kultur-programm-haltung, Marke Kunsthalle Gießhaus, Iserlohn (erfunden). Schibsted Grotesk, Atkinson Hyperlegible Next, IBM Plex Mono. Bilder aus medien (bilder.json, quer und hoch). Prinzip nach Slider Revolution Spatial Scenes (sliderrevolution.com, nur Prinzip, kein Code) und Framer-Komponenten (framer.com). fotograf-film-bild-zuerst nicht gewählt: das Rezept verbietet Bewegung von Maßstab und Lage des Werks. Telefon-Achse mit tieferem Fluchtpunkt (50% 30%), damit die hinteren Bilder nicht in den Einstieg ragen. AD-Review 02.11.2026: Note 3 → 4. Bilder größer (40 vw) und dichter (850 px Tiefe), Hallenboden und -decke als wanderndes Fugenraster, damit der Raum ohne Nutzer lesbar ist und nicht wie lose schwebende Rechtecke wirkt.",
  "varianten": [
   {
    "id": "flug",
    "name": "Flug (Querformat links/rechts)",
    "wann": "Ausstellungs- oder Projektarchiv mit Querformaten, Kultur und Kreativstudio.",
    "werte": {
     "versatz": "x ±22–25vw abwechselnd",
     "seitenverhaeltnis": "3:2",
     "perspective_origin": "50% 46%"
    }
   },
   {
    "id": "achse",
    "name": "Achse (Hochformat auf der Mitte)",
    "wann": "Lookbook, Werkschau, Mode und Porträt: ein Bild nach dem anderen, Titel groß dahinter.",
    "werte": {
     "versatz": "x 0, y 4vh (Telefon 12vh)",
     "seitenverhaeltnis": "2:3",
     "breite": "min(25vw, 400px), Telefon 54vw",
     "perspective_origin": "50% −12% (Telefon 50% 30%)",
     "achsentitel": "Schibsted 900 clamp(3.5rem, 10.5vw, 11rem), versal, −0.04em, Wechsel 150/250 ms"
    }
   }
  ]
 }
}