{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "endlos-scroll-galerie",
 "name": "Endlose Scroll-Galerie mit Tiefenparallaxe",
 "name_en": "Infinite scroll gallery / seamless loop scroll",
 "kurz": "Archivseite einer Mannheimer Fotografin ohne Seitenende: vier Spalten laufen mit eigener Geschwindigkeit und eigener Trägheit, der Footer bleibt fest erreichbar.",
 "kategorie": "Galerien & Slider",
 "kategorie_slug": "galerien-slider",
 "kategorie_nr": 12,
 "bau_chat": "C6",
 "prioritaet": "C",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "editorial",
  "experimentell"
 ],
 "stimmung_roh": [
  "ruhig",
  "meditativ",
  "editorial",
  "künstlerisch"
 ],
 "technik": [
  "lenis",
  "gsap",
  "scrolltrigger",
  "vanilla-js",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "js",
  "gsap",
  "lenis"
 ],
 "leistungskosten": "mittel",
 "steckbrief": {
  "beschreibung": "Eine Bildfolge wird so oft kopiert, dass ihr Ende nahtlos an den Anfang anschließt. Eine virtuelle Scrollposition (eigene oder Lenis mit infinite: true) wächst unbegrenzt und wird per Modulo auf die Höhe eines Satzes abgebildet. Spalten oder Reihen laufen mit unterschiedlichem Faktor und eigener Trägheit; bei schnellem Scrollen ziehen sie elastisch auseinander. Ein Klick öffnet das Bild im Vollbild. Optional blenden Bilder beim Eintritt ein.",
  "warum_es_wirkt": "Es gibt kein Seitenende, nur einen ruhigen Fluss. Die Spalten mit eigener Geschwindigkeit geben Tiefe, ohne ein Bild zu verändern. Das eignet sich als meditativer, markenprägender Einstieg in ein Archiv.",
  "wann_einsetzen": "Archiv- und Indexseiten von Fotografie, Portfolios, Mode-Lookbooks, Kunst- und Kulturprojekten.",
  "wann_nicht": "Auf SEO-relevanten Inhaltsseiten und überall, wo Nutzer etwas gezielt finden müssen. Wenn Impressum und Kontakt über einen Footer erreichbar sein müssen, den Footer fest einblenden.",
  "varianten": [
   "Vertikale Spalten mit unterschiedlichem Faktor und eigener Trägheit (elastisches Raster)",
   "Horizontales Endlosband, auch zweireihig mit verschiedenen Geschwindigkeiten",
   "Endlose Seite, die Inhalte nachlädt und Ebenen staffelt",
   "Scroll-Röhre oder Zylinder (siehe 3d-karussell-zylinder)"
  ],
  "umsetzung": "Lenis mit infinite: true (auf Touch zusätzlich syncTouch: true) oder eine eigene virtuelle Scrollposition aus wheel-, Tasten- und Pointer-Ereignissen. Spaltenversatz: y = −((scroll × faktor) mod satzhoehe), Faktoren z. B. 0,8 / 1 / 1,2. Elastik: pro Spalte ein eigener Lerp (z. B. 0,06 / 0,08 / 0,1), auf die Bildrate umgerechnet. Nur die Spalten bekommen ein transform, nicht die Bilder. Fallstricke: Lenis kennt kein CSS-Scroll-Snap. Kopien für Screenreader verstecken. Satzhöhe nach Resize neu messen. Jede Serie braucht trotzdem eine eigene, indexierbare Seite; der Zurück-Knopf sollte die Position wiederherstellen.",
  "mobil": "Eigenes Wischen mit Schwung (oder Lenis syncTouch, auf iOS unter 16 instabil). Alternative: natives Scrollen ohne Endlosschleife mit nachgeladenen Bildern. Zwei Spalten.",
  "reduzierte_bewegung": "Kein Smooth Scroll, keine Parallaxe: eine normale, endliche Liste mit nativem Scrollen.",
  "barrierefreiheit": "Tastatur muss scrollen können (Pfeile, Bild ab, Leertaste). Sprunglink zu Kontakt und Impressum. Kopien aria-hidden, nur die Originale fokussierbar. Vollbild als Dialog mit Esc und Pfeiltasten."
 },
 "messwerte": {
  "easing": "Lenis-Standard (t) => Math.min(1, 1.001 − 2^(−10t)) bzw. lerp 0,1",
  "dauer_ms": "Lenis duration 1200 (wenn ohne lerp)",
  "stagger_ms": "",
  "distanz": "Spaltenfaktoren 0,8–1,2 (typisch)",
  "sonstiges": "Lenis-Defaults beobachtet; Spaltenwerte typisch",
  "herkunft": "beobachtet",
  "quelle": "https://github.com/darkroomengineering/lenis"
 },
 "kurve": {
  "bezier": [
   0.455,
   0.03,
   0.515,
   0.955
  ],
  "css": "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
  "name": "eigene Kurve",
  "dauer_ms": 1200
 },
 "gesehen_bei": [
  {
   "seite": "Codrops – The Never Ending Story: Seamless Infinite Scroll with GSAP & Lenis (05/2026)",
   "url": "https://tympanus.net/codrops/2026/05/28/the-never-ending-story-building-a-seamless-infinite-scroll-experience-with-gsap-lenis/",
   "auszeichnung": "",
   "beobachtung": "Laut Teaser: endlos nachladende Seite mit geschichteter Parallaxe (Artikeltext nicht gelesen).",
   "art": "artikel"
  },
  {
   "seite": "Codrops – Infinite GSAP Scroll Gallery with Parallax and Flip Transitions (07/2026)",
   "url": "https://tympanus.net/codrops/2026/07/30/building-an-infinite-gsap-scroll-gallery-with-parallax-and-flip-transitions/",
   "auszeichnung": "",
   "beobachtung": "Laut Teaser/Telegram-Post: Galerie aus mehreren kleinen Systemen (Loop, Parallaxe, Reveal, FLIP).",
   "art": "artikel"
  },
  {
   "seite": "Codrops – Elastic Grid Scroll (GitHub)",
   "url": "https://github.com/codrops/ElasticGridScroll",
   "auszeichnung": "",
   "beobachtung": "Repo-Beschreibung: Rasterspalten bewegen sich leicht unterschiedlich schnell für ein elastisches Gefühl.",
   "art": "demo"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops: The Never Ending Story – Infinite Scroll with GSAP & Lenis",
   "url": "https://tympanus.net/codrops/2026/05/28/the-never-ending-story-building-a-seamless-infinite-scroll-experience-with-gsap-lenis/"
  },
  {
   "titel": "Lenis (GitHub)",
   "url": "https://github.com/darkroomengineering/lenis"
  },
  {
   "titel": "Codrops: Infinite Auto-Scrolling Gallery using WebGL with OGL",
   "url": "https://tympanus.net/codrops/2021/01/05/creating-an-infinite-auto-scrolling-gallery-using-webgl-with-ogl-and-glsl-shaders/"
  }
 ],
 "kombinierbar_mit": [
  "galerie-shared-element-vollbild",
  "token-physik-traege",
  "token-luxus-weich"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/galerien-slider/endlos-scroll-galerie/",
  "meta": "https://cecodesign.de/lab/fundus/galerien-slider/endlos-scroll-galerie/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/galerien-slider/endlos-scroll-galerie/demo"
 },
 "herkunft": {
  "quelldateien": [
   "galerien_stile.json",
   "patch-belege-2.json"
  ],
  "pruefnotizen": [
   "patch-belege-2.json: Kein Produktionsbeleg: Lenis-Option infinite in allen geprüften Bundles nur als Default false (z. B. htarchitecte.com). Herabstufung bis zum Fund."
  ],
  "prioritaet_hinweis": "31.10.2026: B → C laut patch-belege-2.json (Kein Produktionsbeleg: Lenis-Option infinite in allen geprüften Bundles nur als Default false (z. B. htarchitecte.com). Herabstufung bis zum Fund.)"
 },
 "bau": {
  "status": "fertig",
  "kurz": "Archivseite einer Mannheimer Fotografin ohne Seitenende: vier Spalten laufen mit eigener Geschwindigkeit und eigener Trägheit, der Footer bleibt fest erreichbar.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "scroll": "eigene virtuelle Scrollposition (Rad, Tasten, Wischen), unbegrenzt; Position je Spur per Modulo auf die Satzhöhe abgebildet",
   "formel": "y = −((ist + versatz) mod satzhoehe), ist += (ziel × faktor − ist) × (1 − (1 − lerp)^(dt/16,67 ms))",
   "spalten_faktor": [
    0.8,
    1,
    1.2,
    0.9
   ],
   "spalten_lerp": [
    0.06,
    0.08,
    0.1,
    0.07
   ],
   "spalten_versatz_px": [
    0,
    220,
    90,
    320
   ],
   "spaltenzahl": "4 ab 1100 px, 3 ab 560 px, sonst 2",
   "band_faktor": [
    1,
    0.75
   ],
   "band_lerp": [
    0.08,
    0.06
   ],
   "kopien": "je Spur ein Kopiensatz vor den Originalen und so viele danach, bis Bildschirm + ein Satz gefüllt sind; Kopien aria-hidden; Lage y = s0 − satz − ((ist + versatz + s0) mod satz), s0 = Kopf + Lücke (gleiches Bild wie −((ist + versatz) mod satz))",
   "touch_schwung": "Wischgeschwindigkeit × 1,6, Abklingen 0,95 pro Frame",
   "tasten": "Pfeile 120 px, Bild ab/Leertaste 80 % der Fensterhöhe",
   "bild_einblenden": "opacity 0 → 1, 600 ms",
   "vollbild_crossfade": "opacity, 500 ms cubic-bezier(0.455, 0.03, 0.515, 0.955)",
   "easing": "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
   "ui_dauer_ms": 200,
   "platzhalter": "#e6e6e6 in Bildgröße (aspect-ratio)",
   "vorfuehrung": "Grundfluss 1,1 px pro Frame (ca. 66 px/s), alle 3,6 s ein Schub von 26–36 px pro Frame mit Abklingen 0,95",
   "leise": "#6e6e6e"
  },
  "ausloeser": "scroll",
  "touch": "Wischen bewegt die virtuelle Position (im Band waagerecht) und läuft mit Schwung aus; zwei Spalten auf dem Telefon. Tippen ohne Ziehen öffnet das Vollbild.",
  "reduziert": "Keine Parallaxe, kein Schwung, keine Kopien: eine endliche Liste in normalen Spalten mit nativem Scrollen. Bilder und Vollbild blenden in 150 ms ein.",
  "korrekturen": {
   "beschreibung": "Eine Bildfolge wird so oft kopiert, dass ihr Ende nahtlos an den Anfang anschließt. Eine virtuelle Scrollposition (eigene oder Lenis mit infinite: true) wächst unbegrenzt und wird per Modulo auf die Höhe eines Satzes abgebildet. Spalten oder Reihen laufen mit unterschiedlichem Faktor und eigener Trägheit; bei schnellem Scrollen ziehen sie elastisch auseinander. Ein Klick öffnet das Bild im Vollbild. Optional blenden Bilder beim Eintritt ein.",
   "warum_es_wirkt": "Es gibt kein Seitenende, nur einen ruhigen Fluss. Die Spalten mit eigener Geschwindigkeit geben Tiefe, ohne ein Bild zu verändern. Das eignet sich als meditativer, markenprägender Einstieg in ein Archiv.",
   "wann_einsetzen": "Archiv- und Indexseiten von Fotografie, Portfolios, Mode-Lookbooks, Kunst- und Kulturprojekten.",
   "wann_nicht": "Auf SEO-relevanten Inhaltsseiten und überall, wo Nutzer etwas gezielt finden müssen. Wenn Impressum und Kontakt über einen Footer erreichbar sein müssen, den Footer fest einblenden.",
   "varianten": [
    "Vertikale Spalten mit unterschiedlichem Faktor und eigener Trägheit (elastisches Raster)",
    "Horizontales Endlosband, auch zweireihig mit verschiedenen Geschwindigkeiten",
    "Endlose Seite, die Inhalte nachlädt und Ebenen staffelt",
    "Scroll-Röhre oder Zylinder (siehe 3d-karussell-zylinder)"
   ],
   "umsetzung": "Lenis mit infinite: true (auf Touch zusätzlich syncTouch: true) oder eine eigene virtuelle Scrollposition aus wheel-, Tasten- und Pointer-Ereignissen. Spaltenversatz: y = −((scroll × faktor) mod satzhoehe), Faktoren z. B. 0,8 / 1 / 1,2. Elastik: pro Spalte ein eigener Lerp (z. B. 0,06 / 0,08 / 0,1), auf die Bildrate umgerechnet. Nur die Spalten bekommen ein transform, nicht die Bilder. Fallstricke: Lenis kennt kein CSS-Scroll-Snap. Kopien für Screenreader verstecken. Satzhöhe nach Resize neu messen. Jede Serie braucht trotzdem eine eigene, indexierbare Seite; der Zurück-Knopf sollte die Position wiederherstellen.",
   "mobil": "Eigenes Wischen mit Schwung (oder Lenis syncTouch, auf iOS unter 16 instabil). Alternative: natives Scrollen ohne Endlosschleife mit nachgeladenen Bildern. Zwei Spalten.",
   "reduzierte_bewegung": "Kein Smooth Scroll, keine Parallaxe: eine normale, endliche Liste mit nativem Scrollen.",
   "barrierefreiheit": "Tastatur muss scrollen können (Pfeile, Bild ab, Leertaste). Sprunglink zu Kontakt und Impressum. Kopien aria-hidden, nur die Originale fokussierbar. Vollbild als Dialog mit Esc und Pfeiltasten."
  },
  "geprueft": "01.11.2026",
  "notiz": "Rezept fotograf-film-bild-zuerst (Signatur-Muster dort, Archivseite mit festem Footer). Erfundene Fotografin Tamara Dörr aus Mannheim, sieben Serien mit je drei Bildern (Rheinufer, Quadrate, Luisenpark, Neckarstadt-West, Mühlauhafen, Fernmeldeturm, Herschelbad), alle Bilder als Canvas-Szenen im Browser gemalt. Instrument Serif nur für Namen und Titel, Fragment Mono für Bildunterschriften und Zähler. Varianten Spalten und Band, Vollbild nur mit Crossfade wie im Rezept. Kein Lenis nötig, Formeln entsprechen dem Steckbrief. Referenzen: github.com/darkroomengineering/lenis, tympanus.net, josephdirand.com, jensbosman.nl. AD-Review 01.11.2026: Note 4. Zugang 02.11.2026: --leise #8a8a8a → #6e6e6e (4,6:1), Navi- und Footerlinks padding-block 4px (Ziel ≥ 24 px), Fokusrahmen der Bühne als ::before innerhalb von Kopf und Fuß, Tab auf ein Bild holt es per Scrollposition unter den Kopf (je Spur ein Kopiensatz vor den Originalen, gleiche Optik), Bildunterschriften in Spalten brechen um statt Auslassungspunkte, Kontrastmodus-Rahmen für Knöpfe. Offen: Prüfung meldet 'Seite gesperrt' (virtuelle Scrollposition, per Rad/Tasten erreichbar)."
 }
}