{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "mehrschicht-parallax",
 "name": "Subtiler mehrschichtiger Parallax",
 "name_en": "Subtle layered parallax (image-in-frame parallax)",
 "kurz": "Bilder wandern im Rahmen gegen den Scroll, Karten und Ziffern laufen mit eigenem Tempo: Tiefe, die man spürt, aber kaum sieht.",
 "kategorie": "Scroll & Section-Animationen",
 "kategorie_slug": "scroll",
 "kategorie_nr": 5,
 "bau_chat": "C2",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 3,
 "stimmung": [
  "ruhig",
  "editorial",
  "luxuriös"
 ],
 "stimmung_roh": [
  "ruhig",
  "hochwertig",
  "editorial"
 ],
 "technik": [
  "css",
  "scroll-driven-css",
  "gsap",
  "scrolltrigger",
  "lenis"
 ],
 "technik_gruppen": [
  "css",
  "gsap",
  "lenis"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Bilder sitzen in einem Rahmen mit overflow: clip und sind innen höher als der Rahmen (rund 120–125 %). Beim Scrollen wandert das Bild im Rahmen langsam gegen die Scrollrichtung, der Rahmen selbst scrollt normal. Zusätzlich laufen einzelne Elemente wie Bildunterschriften, Detailbilder oder Deko-Ziffern mit leicht anderem Tempo (0,8 bis 1,2). So entstehen Ebenen. Keine großen Hintergrundsprünge wie in den 2010ern.",
  "warum_es_wirkt": "Flache Layouts bekommen Tiefe und Gewicht. Die Bewegung ist an den Scroll gekoppelt und linear, deshalb wirkt sie ruhig und hochwertig, ohne aufzufallen.",
  "wann_einsetzen": "Überall mit großen Bildern: Portfolio-Raster, Editorial, Hero, Teaser, Case Studies.",
  "wann_nicht": "Nicht bei Text in Lesespalten, Formularen und Tabellen. Nicht bei kleinen Bildern, dort wirkt es zittrig.",
  "varianten": [
   "Bild im Rahmen: yPercent −10 → 10, Bild entsprechend höher als der Rahmen",
   "Ebenen per data-speed (ScrollSmoother, Locomotive Scroll): Elemente laufen mit 0,8 bis 1,2",
   "data-speed=\"auto\" bei ScrollSmoother: bewegt das Element nur so weit, wie das Elternelement mit overflow: hidden Platz lässt",
   "Gegenläufige Spalten (Reverse-Scrolling Columns), auch rein mit CSS",
   "Text-Parallax: große Schriftzeilen wandern beim Senkrechtscrollen waagerecht"
  ],
  "umsetzung": "CSS: .rahmen { overflow: clip } .rahmen img { height: 125%; top: -12.5%; animation: plx linear both; animation-timeline: view(); animation-range: cover } @keyframes plx { from { translate: 0 -10% } to { translate: 0 10% } }. Liegt das view() am transformierten Bild, wackelt die Messung. Besser den Rahmen als benannte Timeline nutzen (view-timeline-name am Rahmen). GSAP: gsap.fromTo(img, { yPercent: -10 }, { yPercent: 10, ease: 'none', scrollTrigger: { trigger: rahmen, start: 'top bottom', end: 'bottom top', scrub: true } }). Ebenen: y von −w bis +w mit w = (1 − speed) · (Viewport-Höhe + Elementhöhe) / 2, invalidateOnRefresh: true. Das Bild muss den ganzen Weg abdecken, sonst werden Kanten sichtbar: Bildhöhe ≥ 100 % + 2 × Weg. Rahmen-Seitenverhältnis × Überhöhe = Bildformat, dann wird seitlich nichts beschnitten.",
  "mobil": "Die CSS-Variante läuft auf dem Compositor flüssig. JS-Ebenen auf Touch eher abschalten und nur das Bild im Rahmen bewegen, wie Wokine per matchMedia. ScrollSmoother glättet Touch standardmäßig nicht.",
  "reduzierte_bewegung": "Abschalten. Parallax ist ein klassischer Auslöser für vestibuläre Beschwerden. Bilder ruhen mittig im Rahmen.",
  "barrierefreiheit": "Rein dekorativ. Schnellere Ebenen dürfen nie Inhalt verdecken, also genug Abstand für den ganzen Weg einplanen. Text in Lesespalten bleibt fest."
 },
 "messwerte": {
  "easing": "none/linear",
  "dauer_ms": "scrollgekoppelt",
  "stagger_ms": "",
  "distanz": "yPercent -50 → 50 (Rejouice); data-scroll-speed -4 bis 1 (Snellenberg)",
  "sonstiges": "Wokine schaltet Parallaxe per matchMedia auf Mobil ab (ignoreMobile)",
  "herkunft": "beobachtet",
  "quelle": "https://www.rejouice.com/_nuxt/BdSAQIjB.js"
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "GSAP ScrollSmoother (data-speed, data-lag)",
   "url": "https://gsap.com/docs/v3/Plugins/ScrollSmoother/",
   "auszeichnung": "",
   "beobachtung": "effects: true aktiviert data-speed (z. B. 0.5 = halbe Geschwindigkeit) und data-lag; speed 'auto' benötigt overflow: hidden am Elternelement.",
   "art": "artikel"
  },
  {
   "seite": "Locomotive Scroll (auf Lenis aufgebaut)",
   "url": "https://github.com/locomotivemtl/locomotive-scroll",
   "auszeichnung": "",
   "beobachtung": "data-scroll + data-scroll-speed='0.5'; 9,4 kB gzipped.",
   "art": "demo"
  },
  {
   "seite": "scroll-driven-animations.style – Reverse-Scrolling Columns",
   "url": "https://scroll-driven-animations.style/demos/reverse-scroll/css/",
   "auszeichnung": "",
   "beobachtung": "Gegenläufige Spalten rein mit CSS.",
   "art": "demo"
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML, Locomotive Scroll): Porträt data-scroll-speed=\"-3\", Textzeile data-scroll-speed=\"1\", Footer data-scroll-speed=\"-4\".",
   "art": "website",
   "browser_gemessen": true
  },
  {
   "seite": "Rejouice",
   "url": "https://www.rejouice.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (BdSAQIjB.js): Bild innen yPercent -50 → 50, ease none, scrub (top bottom → bottom top).",
   "art": "website"
  },
  {
   "seite": "Wokine",
   "url": "https://www.wokine.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (entry.CEQ4-SOz.js): Vue-Direktive v-prllx – fromTo mit frei wählbaren Werten, ScrollTrigger id \"prllx\", scrub true, ease none, Standard start \"top bottom\" / end \"bottom top\", optional auf Mobil aus.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Olivier Larose – Smooth Parallax Scroll",
   "url": "https://blog.olivierlarose.com/tutorials/smooth-parallax-scroll"
  },
  {
   "titel": "Olivier Larose – Background Image Parallax",
   "url": "https://blog.olivierlarose.com/tutorials/background-image-parallax"
  },
  {
   "titel": "Olivier Larose – Text Parallax",
   "url": "https://blog.olivierlarose.com/tutorials/text-parallax"
  }
 ],
 "kombinierbar_mit": [
  "clip-path-bild-reveal",
  "smooth-scroll-lenis",
  "horizontal-scroll-section"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/scroll/mehrschicht-parallax/",
  "meta": "https://cecodesign.de/lab/fundus/scroll/mehrschicht-parallax/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/scroll/mehrschicht-parallax/demo"
 },
 "herkunft": {
  "quelldateien": [
   "scroll.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Drei Produktionsbelege."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Bilder wandern im Rahmen gegen den Scroll, Karten und Ziffern laufen mit eigenem Tempo: Tiefe, die man spürt, aber kaum sieht.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "ScrollTrigger@3.15.0"
  ],
  "werte": {
   "easing": "none (linear), scrub: true",
   "bereich": "start 'top bottom' → end 'bottom top' (Rahmen bzw. Ebene)",
   "bild_im_rahmen": "img height 125 %, top −12,5 %; yPercent −10 → 10 (= ±12,5 % der Rahmenhöhe, Kanten bleiben verdeckt)",
   "rahmen_format": "Rahmen-Seitenverhältnis × 1,25 = Bildformat: 15/8 für 3:2-Bilder, 1/1 für 4:5-Bilder",
   "ebenen_speed": "Ziffer 0,8 · Bild Kopf 0,9 · Projekt-Logo 0,9 · Bildunterschrift 0,92 · Projekt-Logo 1,12 · Detailbild 1,15 · Fokus-Karte 1,15 · Farbkarte 1,2",
   "ebenen_formel": "y von −w bis +w, w = (1 − speed) · (Viewport-Höhe + Elementhöhe) / 2 (entspricht data-speed bei ScrollSmoother)",
   "text_parallax": "Band-Zeile 1 xPercent 0 → −14, Zeile 2 xPercent −14 → 0",
   "touch": "Startvariante 'Rahmen' (nur Bild im Rahmen, keine Ebenen)",
   "vorfuehrung_ms": 16000
  },
  "ausloeser": "scroll",
  "touch": "Ohne Hover startet die Demo in der Variante „Rahmen“: Nur das Bild wandert im Rahmen, Karten und Ziffern stehen. Die anderen Varianten lassen sich per Tippen zuschalten. Auf schmalen Bildschirmen hat die Farbkarte 120 px Abstand zum Text, damit sie nichts verdeckt.",
  "reduziert": "Keine ScrollTrigger, alle Transforms aus. Bilder ruhen mittig im Rahmen, Varianten-Schalter deaktiviert, Werte-Anzeige meldet „Parallax aus“. Reagiert auch auf Umschalten zur Laufzeit.",
  "korrekturen": {
   "beschreibung": "Bilder sitzen in einem Rahmen mit overflow: clip und sind innen höher als der Rahmen (rund 120–125 %). Beim Scrollen wandert das Bild im Rahmen langsam gegen die Scrollrichtung, der Rahmen selbst scrollt normal. Zusätzlich laufen einzelne Elemente wie Bildunterschriften, Detailbilder oder Deko-Ziffern mit leicht anderem Tempo (0,8 bis 1,2). So entstehen Ebenen. Keine großen Hintergrundsprünge wie in den 2010ern.",
   "warum_es_wirkt": "Flache Layouts bekommen Tiefe und Gewicht. Die Bewegung ist an den Scroll gekoppelt und linear, deshalb wirkt sie ruhig und hochwertig, ohne aufzufallen.",
   "wann_einsetzen": "Überall mit großen Bildern: Portfolio-Raster, Editorial, Hero, Teaser, Case Studies.",
   "wann_nicht": "Nicht bei Text in Lesespalten, Formularen und Tabellen. Nicht bei kleinen Bildern, dort wirkt es zittrig.",
   "varianten": [
    "Bild im Rahmen: yPercent −10 → 10, Bild entsprechend höher als der Rahmen",
    "Ebenen per data-speed (ScrollSmoother, Locomotive Scroll): Elemente laufen mit 0,8 bis 1,2",
    "data-speed=\"auto\" bei ScrollSmoother: bewegt das Element nur so weit, wie das Elternelement mit overflow: hidden Platz lässt",
    "Gegenläufige Spalten (Reverse-Scrolling Columns), auch rein mit CSS",
    "Text-Parallax: große Schriftzeilen wandern beim Senkrechtscrollen waagerecht"
   ],
   "umsetzung": "CSS: .rahmen { overflow: clip } .rahmen img { height: 125%; top: -12.5%; animation: plx linear both; animation-timeline: view(); animation-range: cover } @keyframes plx { from { translate: 0 -10% } to { translate: 0 10% } }. Liegt das view() am transformierten Bild, wackelt die Messung. Besser den Rahmen als benannte Timeline nutzen (view-timeline-name am Rahmen). GSAP: gsap.fromTo(img, { yPercent: -10 }, { yPercent: 10, ease: 'none', scrollTrigger: { trigger: rahmen, start: 'top bottom', end: 'bottom top', scrub: true } }). Ebenen: y von −w bis +w mit w = (1 − speed) · (Viewport-Höhe + Elementhöhe) / 2, invalidateOnRefresh: true. Das Bild muss den ganzen Weg abdecken, sonst werden Kanten sichtbar: Bildhöhe ≥ 100 % + 2 × Weg. Rahmen-Seitenverhältnis × Überhöhe = Bildformat, dann wird seitlich nichts beschnitten.",
   "mobil": "Die CSS-Variante läuft auf dem Compositor flüssig. JS-Ebenen auf Touch eher abschalten und nur das Bild im Rahmen bewegen, wie Wokine per matchMedia. ScrollSmoother glättet Touch standardmäßig nicht.",
   "reduzierte_bewegung": "Abschalten. Parallax ist ein klassischer Auslöser für vestibuläre Beschwerden. Bilder ruhen mittig im Rahmen.",
   "barrierefreiheit": "Rein dekorativ. Schnellere Ebenen dürfen nie Inhalt verdecken, also genug Abstand für den ganzen Weg einplanen. Text in Lesespalten bleibt fest."
  },
  "geprueft": "31.10.2026",
  "notiz": "Portfolio-Ausschnitt des erfundenen Markenbüros Haus Marlow mit GSAP ScrollTrigger: Bilder wandern im Rahmen (yPercent −10 → 10), Farbkarte, Fokus-Karte, Detailbild und Deko-Ziffer laufen mit 0,8 bis 1,2. Umschalter: Rahmen, Ebenen, + Schrift (Text-Parallax im Band). Die Vorführung scrollt als Pendel (16 s) und wechselt je Runde zwischen Ebenen und + Schrift. Lenis würde die Wirkung auf Desktop weiter glätten, ist hier bewusst weggelassen. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --leise Alpha .58 → .66 (5,1:1 auf #ece8df). Kontrastmodus: Knöpfe mit Rahmen ButtonText. Bewusst offen: Riesenziffer „01“ (Alpha .09) und das waagerecht laufende Textband sind Textur mit aria-hidden; die Prüfung zählt sie trotzdem (Kontrast, abgeschnitten bei 200 %/320 px)."
 }
}