{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "bild-scheiben-tiefe",
 "name": "Bild-Scheiben in der Tiefe",
 "name_en": "Image slices with depth (Slicey principle)",
 "kurz": "Kampagnen-Hero eines Ladens für Duft, Leinen und Keramik: drei Scheiben aus dem Produktbild heben sich unscharf ab, werden scharf, zoomen stärker als das Bild und verschieben sich mit Zeiger und Scroll, während das Bild dahinter zurücktritt.",
 "kategorie": "Hero & Section-Layouts",
 "kategorie_slug": "hero-layouts",
 "kategorie_nr": 4,
 "bau_chat": "C2",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise",
  "filmisch"
 ],
 "stimmung_roh": [
  "architektonisch",
  "räumlich",
  "ruhig"
 ],
 "technik": [
  "css",
  "container-queries",
  "scroll-driven-css",
  "@property",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Aus einem Hero-Bild werden zwei bis vier Streifen oder Rechtecke herausgeschnitten. Sie zeigen genau den Bildteil, der dahinter liegt, heben sich aber leicht ab: Sie zoomen etwas stärker als das Bild, werfen einen Schatten und versetzen sich bei Zeigerbewegung oder beim Scrollen. So entsteht Tiefe aus einem einzigen Foto.",
  "warum_es_wirkt": "Das Auge liest den Versatz an den Schnittkanten als Abstand. Die Scheiben folgen dem Raster der Seite oder des Motivs (Lamellen, Geschosse, Fenster) und machen das Raster selbst zum Bild. Es braucht kein 3D-Modell und kein zweites Motiv.",
  "wann_einsetzen": "Hero mit einem starken Foto, das klare Linien hat: Architektur, Innenraum, Mode-Kampagne, Boutique-Hotel als ruhige Alternative zum Ken-Burns-Hero, Kreativstudio.",
  "wann_nicht": "Werke von Fotograf:innen (verändert die Komposition fremder Bilder). Bilder mit Gesichtern oder Schrift an den Schnittkanten. Produktfotos im Shop. Zusammen mit mehrschicht-parallax oder zoom-parallax auf demselben Bild. Wenn das Motiv keine Linien hat, an denen die Schnitte sitzen können.",
  "varianten": [
   "Senkrecht: drei bis vier Streifen wie Lamellen oder Fassadenachsen",
   "Waagerecht: Bänder wie Geschosse oder Stufen",
   "Rechtecke: zwei bis drei freie Ausschnitte nach dem Seitenraster (Slicey-Grundform)",
   "Auslöser: Zeiger (Desktop), Scroll (Hero verlässt den Bildschirm), einmal beim Laden"
  ],
  "umsetzung": "Bühne mit container-type: size, darin das Bild als <img> (object-fit: cover). Jede Scheibe ist ein Rahmen mit overflow: hidden an Position x, y, b, h in Prozent der Bühne; darin dasselbe Bild in voller Bühnengröße (100cqw × 100cqh), um −x und −y verschoben. Damit zeigt die Scheibe deckungsgleich den Bildteil dahinter. Tiefe je Scheibe (0 bis 1) steuert scale 1 + Tiefe × (0,1 + Scrollhub × 0,07), Versatz Zeiger × Tiefe × 30 px und einen weichen Schatten. Beim Laden heben sich die Scheiben in 1,1 s (110 ms versetzt) und werden dabei von 7 px Unschärfe scharf; das Bild dahinter wird gleichzeitig dunkler und etwas entsättigt (brightness .68, saturate .75), damit die Scheiben im Licht stehen. Zeiger: pointermove setzt --zx, --zy (−1 bis 1), weich nachgezogen (Lerp 0,08). Scroll: @property --hub per animation-timeline: view() von 0 auf 1, solange der Hero aus dem Bild scrollt; ohne Scroll-Timeline setzt ein Skript --hub.",
  "mobil": "Ohne Zeiger nur Scroll und Anheben beim Laden. Weniger Scheiben (die äußere entfällt unter 760 px), Hochformat-Bild.",
  "reduzierte_bewegung": "Scheiben stehen still in ruhender Tiefe, Schatten bleibt; kein Zeiger- und kein Scrollversatz.",
  "barrierefreiheit": "Die Scheiben sind Dekoration (aria-hidden, Hintergrundbild ohne Alt), das eigentliche <img> trägt den Alt-Text. Kein Autoplay: Bewegung nur einmal beim Laden (gut 1 s) und als Antwort auf Zeiger und Scroll, deshalb kein Pause-Knopf nötig. Text liegt nie auf den Scheiben."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.25, 1, 0.5, 1) beim Anheben; Zeiger linear nachgezogen (Lerp 0,08 pro Frame)",
  "dauer_ms": "1100 Anheben beim Laden, 250 UI",
  "stagger_ms": "110",
  "distanz": "scale je Scheibe 1 + Tiefe × (0,1 + Scrollhub × 0,07), also bis 1,17; Unschärfe 7 px → 0 beim Anheben; Zeigerversatz Tiefe × 30 px waagerecht und × 20 px senkrecht, Bild dahinter gegenläufig 8/6 px und scale 1,03 bis 1,06",
  "sonstiges": "Schatten bis 0 34px 70px rgba(8,10,30,.5) bei voller Tiefe, Haarlinie innen bis Alpha .55, Bild dahinter bis brightness .68 und saturate .75. Kurve aus Rezept mode-beauty-kollektion.",
  "herkunft": "eigene Festlegung",
  "quelle": "Rezept mode-beauty-kollektion"
 },
 "kurve": {
  "bezier": [
   0.25,
   1.0,
   0.5,
   1.0
  ],
  "css": "cubic-bezier(0.25, 1, 0.5, 1)",
  "name": "power3.out",
  "dauer_ms": 1100
 },
 "gesehen_bei": [
  {
   "seite": "Slider Revolution Manual: Slicey",
   "url": "https://www.sliderrevolution.com/sr_manual_section/slicey/",
   "auszeichnung": "",
   "beobachtung": "Handbuch (abgerufen 02.11.2026): Jede Slicey-Ebene ist ein Rechteck, das denselben Ausschnitt des Hintergrundbilds zeigt und stärker zoomt („Scale Offset“ als Prozent zusätzlich zum Zoom des Hintergrunds), optional mit Unschärfe von/bis, Schattenunschärfe und Rand in Schattenfarbe. Mehrere Ebenen ergeben den Effekt. Nur das Prinzip ist übernommen.",
   "art": "artikel"
  },
  {
   "seite": "Codrops: Coding the Sliced Image Hover Effect from Quai Network",
   "url": "https://tympanus.net/codrops/2023/06/21/coding-the-sliced-image-hover-effect-from-quai-network/",
   "auszeichnung": "",
   "beobachtung": "Manoela Ilic, 21.06.2023, nach der Website von Quai Network (Unseen Studio): Bild in 5 oder 15 Scheiben mit gleichem background-image, je per clip-path, senkrecht oder waagerecht; 1 px Überlappung gegen Kantenblitzer; 0,5 s power3.inOut bzw. 0,6 s expo.inOut. Verwandt (Scheiben versetzen sich), aber als Hover-Übergang, nicht als Tiefe.",
   "art": "tutorial"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: Coding the Sliced Image Hover Effect from Quai Network",
   "url": "https://tympanus.net/codrops/2023/06/21/coding-the-sliced-image-hover-effect-from-quai-network/"
  },
  {
   "titel": "MDN: CSS container queries",
   "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries"
  }
 ],
 "kombinierbar_mit": [
  "editorial-magazin-layout",
  "meta-labels-hud-typografie",
  "hide-on-scroll-header",
  "token-swiss-knackig"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/",
  "meta": "https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/hero-layouts/bild-scheiben-tiefe/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Buttons/SR-Recherche 02.11.2026"
  ],
  "pruefnotizen": [
   "02.11.2026: Prinzip im Slicey-Handbuch belegt; verwandte Schnitt-Technik bei Codrops (Quai Network). Keine Produktionsseite mit Tiefen-Scheiben im Hero gemessen; Beleg steht aus.",
   "Ken-Burns-Dauer 6–10 s aus der Recherche nicht übernommen: die Demo hebt einmal beim Laden (1,1 s nach dem Rezept mode-beauty-kollektion) und folgt dann Zeiger und Scroll."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Kampagnen-Hero eines Ladens für Duft, Leinen und Keramik: drei Scheiben aus dem Produktbild heben sich unscharf ab, werden scharf, zoomen stärker als das Bild und verschieben sich mit Zeiger und Scroll, während das Bild dahinter zurücktritt.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "scheibe": "Rahmen overflow:hidden an x/y/b/h in % der Bühne; innen dasselbe Bild 100cqw × 100cqh, left −x·1cqw, top −y·1cqh, background cover",
   "tiefe_t": "--heben (0 → 1) × Tiefe der Scheibe",
   "scale": "1 + t × (.1 + hub × .07), also bis 1,17",
   "unschaerfe": "filter blur((1 − heben) × 7px): unscharf von, scharf bis (Slicey-Prinzip)",
   "zeiger_versatz": "zx × t × 30px, zy × t × 20px; Bild dahinter gegenläufig −8px × zx, −6px × zy, scale 1.03 + hub × .03",
   "zeiger_lerp": 0.08,
   "schatten": "0 (t × 34px) (t × 70px) rgba(8,10,30, t × .5) plus 0 (t × 6px) (t × 14px) rgba(8,10,30, t × .25); Haarlinie inset 1px rgba(255,255,255, t × .55)",
   "bild_dahinter": "brightness 1 − licht × .32, saturate 1 − licht × .25; licht 0 → 1 mit dem Anheben",
   "anheben_ms": 1100,
   "stagger_ms": 110,
   "easing": "cubic-bezier(0.25, 1, 0.5, 1)",
   "scroll_hub": "@property --hub 0 → 1 per animation-timeline: view(), animation-range exit 0% exit 100%; ohne Scroll-Timeline per Skript",
   "buehne_hoehe": "max(380px, 100svh − Kopf − 162px), volle Breite; Telefon max(360px, 62svh) mit Hochformat-Bild",
   "vorfuehrung": "Runde 8 s: Anheben, gedachter Zeiger auf Lissajous-Bahn (sin/cos, .95/.7), Scroll-Hub schwillt bis .9",
   "farben": "#f6f3ee Grund, #ebe7e0 Fläche, #cecdc6 Linie, #121010 Text, #6b645b Meta",
   "schriften": "Zalando Sans (Name wdth 125, wght 400, clamp(2rem, 1.2rem + 2.6vw, 3.75rem); Zusatz wdth 100, wght 300, .62em), Fragment Mono 0.75rem versal für Formel, Preis und Marken über dem Bild"
  },
  "ausloeser": "hover",
  "touch": "Kein Zeiger: Scheiben heben sich beim Laden und zoomen beim Scrollen, die äußere Scheibe und ihre Marke entfallen unter 760 px, Hochformat-Bild; ohne Hover keine Marken über dem Bild.",
  "reduziert": "Scheiben stehen sofort scharf in ruhender Tiefe mit Schatten und Haarlinie, Bild dahinter abgedunkelt, kein Zeiger- und kein Scrollversatz.",
  "korrekturen": {
   "umsetzung": "Bühne mit container-type: size, darin das Bild als <img> (object-fit: cover). Jede Scheibe ist ein Rahmen mit overflow: hidden an Position x, y, b, h in Prozent der Bühne; darin dasselbe Bild in voller Bühnengröße (100cqw × 100cqh), um −x und −y verschoben. Damit zeigt die Scheibe deckungsgleich den Bildteil dahinter. Tiefe je Scheibe (0 bis 1) steuert scale 1 + Tiefe × (0,1 + Scrollhub × 0,07), Versatz Zeiger × Tiefe × 30 px und einen weichen Schatten. Beim Laden heben sich die Scheiben in 1,1 s (110 ms versetzt) und werden dabei von 7 px Unschärfe scharf; das Bild dahinter wird gleichzeitig dunkler und etwas entsättigt (brightness .68, saturate .75), damit die Scheiben im Licht stehen. Zeiger: pointermove setzt --zx, --zy (−1 bis 1), weich nachgezogen (Lerp 0,08). Scroll: @property --hub per animation-timeline: view() von 0 auf 1, solange der Hero aus dem Bild scrollt; ohne Scroll-Timeline setzt ein Skript --hub.",
   "mobil": "Ohne Zeiger nur Scroll und Anheben beim Laden. Weniger Scheiben (die äußere entfällt unter 760 px), Hochformat-Bild.",
   "barrierefreiheit": "Die Scheiben sind Dekoration (aria-hidden, Hintergrundbild ohne Alt), das eigentliche <img> trägt den Alt-Text. Kein Autoplay: Bewegung nur einmal beim Laden (gut 1 s) und als Antwort auf Zeiger und Scroll, deshalb kein Pause-Knopf nötig. Text liegt nie auf den Scheiben."
  },
  "geprueft": "02.11.2026",
  "notiz": "Rezept mode-beauty-kollektion, Marke Haff (Duft, Leinen, Keramik, Ueckermünde; erfunden). Zalando Sans und Fragment Mono, warmes Off-White, Formel und Preis in der Titelzeile wie bei Typology. Bilder flakon, stoff-stapel und keramik-stillleben aus medien. Marken über dem Bild nennen, was die Scheibe zeigt (Duftnoten, Stücke). Prinzip nach dem Slicey-Handbuch (sliderrevolution.com) und Codrops (tympanus.net). AD-Review 02.11.2026: Note 3 → 4. Welt von Architekturbüro (gleiches Treppenbild und gleiche Branche wie pfeil-icon-button) auf Mode und Beauty umgestellt, Tiefe deutlich verstärkt (scale bis 1,17, Zeigerversatz 30 px, Unschärfe beim Anheben, Bild dahinter tritt zurück).",
  "varianten": [
   {
    "id": "senkrecht",
    "name": "Senkrecht (Lamellen)",
    "wann": "Produkt- oder Kampagnenbild mit einem klaren Objekt: Streifen schneiden durch Flakon, Fassade oder Figur.",
    "werte": {
     "bild": "flakon",
     "scheiben": "x 8.33/25/66.66 %, Breite 8.33/12.5/8.33 %, Höhe 78/90/74 %",
     "tiefe": [
      0.7,
      1,
      0.55
     ],
     "marken": "Kopfnote, Herznote, Basisnote"
    }
   },
   {
    "id": "waagerecht",
    "name": "Waagerecht (Bänder)",
    "wann": "Stapel, Schichten, Innenraum, Landschaft: Bänder wie Lagen, Geschosse oder Regalböden.",
    "werte": {
     "bild": "stoff-stapel",
     "scheiben": "y 26/45/62 %, Höhe 10/11/9 %, Breite 66.66/83.33/58.33 %",
     "tiefe": [
      0.55,
      1,
      0.75
     ],
     "marken": "keine"
    }
   },
   {
    "id": "rechtecke",
    "name": "Rechtecke (Slicey-Grundform)",
    "wann": "Stillleben, Kollektion, Kreativstudio: freie Ausschnitte um einzelne Stücke.",
    "werte": {
     "bild": "keramik-stillleben",
     "scheiben": "(29.16, 14, 16.66, 44) (53.5, 58, 7.5, 18) (75, 81, 16.66, 17) in %",
     "tiefe": [
      1,
      0.6,
      0.8
     ],
     "marken": "Flaschenvase, Becher, Schale"
    }
   }
  ]
 }
}