{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "loader-wird-layout",
 "name": "Nahtlose Übergabe: Loader-Element wird Teil des Layouts",
 "name_en": "Loader-to-hero handoff / seamless intro transition",
 "kurz": "Logo, Zähler, Ladebalken und Bild verschwinden nicht mit dem Loader, sondern reisen per Flip an ihren Platz im Layout: Die Seite baut sich um sie herum auf.",
 "kategorie": "Preloader & Intro",
 "kategorie_slug": "preloader-intro",
 "kategorie_nr": 2,
 "bau_chat": "C3",
 "prioritaet": "A",
 "trendstatus": "aufsteigend",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "luxuriös",
  "filmisch"
 ],
 "stimmung_roh": [
  "filmisch",
  "nahtlos",
  "hochwertig"
 ],
 "technik": [
  "gsap",
  "flip",
  "clip-path",
  "css"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "1) Der Loader besteht aus Elementen, die nach dem Laden bleiben und zu Layoutbausteinen werden. Das Ladebild wächst zur Hero, der Zähler wird Kennzahl oder Seitenzahl, das Logo fliegt in die Navigation, der Ladebalken wird zur Trennlinie. 2) Die Übergabe läuft per Flip, Clip-Path oder geteilten Koordinaten. Es gibt keinen Fade-to-Black und keinen harten Schnitt. 3) Der restliche Inhalt baut sich um die übergebenen Elemente herum auf.",
  "warum_es_wirkt": "Der Loader ist der erste Akt der Seite und kein Wartezimmer. Das Auge folgt einem Objekt aus dem Loader direkt in die Seite. So entsteht Kontinuität statt Unterbrechung.",
  "wann_einsetzen": "Wenn ein Preloader ohnehin nötig ist, etwa für WebGL, Video oder viele Bilder. Und bei Portfolios, die ein Intro inszenieren.",
  "wann_nicht": "Wenn kein Loader nötig ist. Dann besser intro-ohne-wartezeit.",
  "varianten": [
   "Ladebild wird zur Hero per Flip (Position und Größe)",
   "Ladebild wird zur Hero per clip-path: Fenster inset(…) → inset(0), Bild zoomt gegenläufig zurück",
   "Bildstapel wird Raster: die oberste Kachel wird Hero, die übrigen werden Vorschaubilder",
   "Logo fliegt in die Navigation (Flip)",
   "Zähler wird Seitennummer, Jahreszahl oder Kennzahl",
   "Mehrstufig: Loader, dann Intro-Screen, dann Layout"
  ],
  "umsetzung": "Loader-Elemente sind dieselben DOM-Knoten wie die späteren Layout-Elemente, zum Beispiel das Hero-Bild. Beim Start hängt man sie in Plätze des Loaders um oder setzt eine Klasse wie .is-loading, die Fenstergröße und Zentrierung regelt. Nach dem Laden: const s = Flip.getState(els, { props: 'color' }); Knoten zurückhängen bzw. Klasse entfernen; Flip.from(s, { duration: 1, ease: 'expo.inOut' }). Text und Linien mit scale: true, Bilder ohne scale, sonst verzerrt object-fit. Das Loader-Panel gleichzeitig per clip-path inset(2.5rem) → inset(100% 0 0 0) wegziehen. Alternative ohne Umhängen: clip-path von einem kleinen Fenster auf inset(0) mit Gegen-Scale des Bildes. Fallstrick: Kein Element klonen oder ersetzen, sonst flackert der Bildwechsel. Die Übergabe erst starten, wenn Schriften und Bilder wirklich geladen sind (document.fonts.ready, img.decode()).",
  "mobil": "Funktioniert gut. Die Fenstergröße relativ zur kürzeren Bildschirmseite wählen. Ziele, die im einspaltigen Layout unter dem sichtbaren Bereich liegen, reisen aus dem Bild; das wichtigste Element (Hero-Bild) sollte oben landen.",
  "reduzierte_bewegung": "Elemente stehen sofort in Endposition, kurzer Fade. Kein Zähler, kein Wischen.",
  "barrierefreiheit": "Während des Loaders aria-busy=\"true\" am main, danach entfernen. Den Fokus nicht verschieben. Das Loader-Panel ist aria-hidden; die Kennzahl bleibt als normaler Text im Layout lesbar."
 },
 "messwerte": {
  "easing": "expo.inOut",
  "dauer_ms": "1000 (Joffrey Flip), 1800 (Bisous)",
  "stagger_ms": "",
  "distanz": "Loader-Fenster inset 2.5rem → Layout-Position",
  "sonstiges": "Joffrey: Titel/Prozent yPercent -105, 1s power2.out, Stagger .15",
  "herkunft": "beobachtet",
  "quelle": "https://joffreyspitzer.com/_astro/layout.astro_astro_type_script_index_0_lang.QNTHFiVA.js"
 },
 "kurve": {
  "bezier": [
   0.87,
   0,
   0.13,
   1
  ],
  "css": "cubic-bezier(0.87, 0, 0.13, 1)",
  "name": "expo.inOut",
  "dauer_ms": 1000
 },
 "gesehen_bei": [
  {
   "seite": "Codrops Playground: Bildstapel ins Grid",
   "url": "https://tympanus.net/codrops/2020/11/24/image-stack-intro-animation/",
   "auszeichnung": "",
   "beobachtung": "Der Ladestapel ist identisch mit den späteren Grid-Bildern, die Übergabe läuft per Bewegung.",
   "art": "artikel"
  },
  {
   "seite": "Joffrey Spitzer Portfolio",
   "url": "https://joffreyspitzer.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (layout…QNTHFiVA.js): Zähler läuft 3s in steps(14) auf 100; danach clipPath des Hintergrunds inset(2.5rem) → inset(100% 0 0 0) (1s expo.inOut) und das Showreel springt per GSAP Flip (absolute, scale, 1s expo.inOut) aus der Loader-Position an seinen Platz im Layout.",
   "art": "website"
  },
  {
   "seite": "Bisous (CGI-Studio, Beaucoup)",
   "url": "https://bisous-production.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (app.714b3b.js): die Werke aus dem Loader-Stapel werden nicht ausgeblendet, sondern wachsen per animateWorksTransform (1.8s expo.inOut) zu den Vollbild-Medien der Startseite; Loader-Element wird erst danach entfernt.",
   "art": "website"
  }
 ],
 "tutorials": [
  {
   "titel": "Codrops Tag: intro",
   "url": "https://tympanus.net/codrops/tag/intro"
  }
 ],
 "kombinierbar_mit": [
  "bildstapel-intro",
  "prozent-zaehler",
  "logo-aufbau-intro",
  "webgl-ladeszene-fortschritt"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/preloader-intro/loader-wird-layout/",
  "meta": "https://cecodesign.de/lab/fundus/preloader-intro/loader-wird-layout/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/preloader-intro/loader-wird-layout/demo"
 },
 "herkunft": {
  "quelldateien": [
   "uebergaenge.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Zwei Produktionsbelege."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Logo, Zähler, Ladebalken und Bild verschwinden nicht mit dem Loader, sondern reisen per Flip an ihren Platz im Layout: Die Seite baut sich um sie herum auf.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "Flip@3.15.0"
  ],
  "werte": {
   "easing": "Übergabe expo.inOut = cubic-bezier(0.87, 0, 0.13, 1) · Text power2.out",
   "dauer_ms": "Übergabe 1000 (Bild-Flip, Clip-Fenster) · 1800 (Stapel → Raster)",
   "zaehler": "0 → 100 in 3000 ms, ease steps(14); Ladebalken scaleX 0 → 1 im selben Tween; Übergabe startet 250 ms nach 100",
   "panel": "dunkles Loader-Panel clip-path inset(2.5rem) → inset(100% 0 0 0), gleiche Dauer und Kurve wie die Übergabe; unter 760 px inset(1.25rem)",
   "fenster": "Ladebild 4:5, Breite 32 % der kürzeren Bildschirmseite (unter 760 px 52 %), mittig im Panel",
   "uebergabe_flip": "Flip.getState([Logo, Zähler, Balken, Bild], { props: 'color' }) → Knoten zurück in ihre Layout-Eltern umhängen (kein Klonen) → Flip.from: Text und Balken scale: true, Bilder über Breite/Höhe; Farbe Hell → Tinte wird mitanimiert",
   "uebergabe_clip": "Bild bleibt an seinem Layout-Platz; Fenster so groß wie der Loader-Platz, mittig auf dem Hero-Bild: clip-path inset(y x y x) px → inset(0), Bild scale 1.3 → 1, 1000 ms expo.inOut",
   "uebergabe_stapel": "4 Kacheln im Loader gestapelt (rotation −5°, 3,5°, −2°, 0°), oberste wird Hero, die anderen drei werden die Vorschaubilder; Flip mit stagger 80 ms, 1800 ms expo.inOut, Drehung → 0",
   "laden_bild": "Bild-Flip: Ladebild öffnet clip-path inset(100% 0 0 0) → inset(0) in 900 ms expo.inOut ab 150 ms, Bild darin scale 1.18 → 1 über 3000 ms linear · Stapel: Kacheln öffnen nacheinander von unten, je 700 ms expo.inOut, bei 100, 850, 1600 und 2350 ms · Clip-Fenster: Fenster öffnet von unten in 900 ms expo.inOut ab 150 ms",
   "text": "Headline-Zeilen in Masken yPercent 105 → 0, 1000 ms power2.out, Versatz 150 ms, Start bei 55 % der Übergabe",
   "nebenelemente": "Navigation, Lead, Labels, Bildunterschrift (bei Bild-Flip und Clip auch die Vorschaubilder): autoAlpha 0 → 1, y 14 → 0, 1000 ms power2.out, Versatz 50 ms, Start bei 70 % der Übergabe",
   "z_index": "Panel 10, reisende Knoten 20 während der Übergabe (Klasse .reist)"
  },
  "ausloeser": "laden",
  "touch": "Gleicher Ablauf ohne Hover. Unter 760 px: Fenster 52 % der kürzeren Seite, Panel-Rand 1,25rem, Info-Zeile im Loader entfällt, Layout einspaltig (Bild unter der Headline). Zähler und Vorschaubilder reisen dabei unter den sichtbaren Bereich. Varianten per Tippen auf den Umschalter.",
  "reduziert": "Kein Loader und keine Reise: Die Seite steht sofort in Endposition und blendet in 250 ms ein. Der Umschalter startet nur diesen Fade neu.",
  "korrekturen": {
   "beschreibung": "1) Der Loader besteht aus Elementen, die nach dem Laden bleiben und zu Layoutbausteinen werden. Das Ladebild wächst zur Hero, der Zähler wird Kennzahl oder Seitenzahl, das Logo fliegt in die Navigation, der Ladebalken wird zur Trennlinie. 2) Die Übergabe läuft per Flip, Clip-Path oder geteilten Koordinaten. Es gibt keinen Fade-to-Black und keinen harten Schnitt. 3) Der restliche Inhalt baut sich um die übergebenen Elemente herum auf.",
   "warum_es_wirkt": "Der Loader ist der erste Akt der Seite und kein Wartezimmer. Das Auge folgt einem Objekt aus dem Loader direkt in die Seite. So entsteht Kontinuität statt Unterbrechung.",
   "wann_einsetzen": "Wenn ein Preloader ohnehin nötig ist, etwa für WebGL, Video oder viele Bilder. Und bei Portfolios, die ein Intro inszenieren.",
   "wann_nicht": "Wenn kein Loader nötig ist. Dann besser intro-ohne-wartezeit.",
   "varianten": [
    "Ladebild wird zur Hero per Flip (Position und Größe)",
    "Ladebild wird zur Hero per clip-path: Fenster inset(…) → inset(0), Bild zoomt gegenläufig zurück",
    "Bildstapel wird Raster: die oberste Kachel wird Hero, die übrigen werden Vorschaubilder",
    "Logo fliegt in die Navigation (Flip)",
    "Zähler wird Seitennummer, Jahreszahl oder Kennzahl",
    "Mehrstufig: Loader, dann Intro-Screen, dann Layout"
   ],
   "umsetzung": "Loader-Elemente sind dieselben DOM-Knoten wie die späteren Layout-Elemente, zum Beispiel das Hero-Bild. Beim Start hängt man sie in Plätze des Loaders um oder setzt eine Klasse wie .is-loading, die Fenstergröße und Zentrierung regelt. Nach dem Laden: const s = Flip.getState(els, { props: 'color' }); Knoten zurückhängen bzw. Klasse entfernen; Flip.from(s, { duration: 1, ease: 'expo.inOut' }). Text und Linien mit scale: true, Bilder ohne scale, sonst verzerrt object-fit. Das Loader-Panel gleichzeitig per clip-path inset(2.5rem) → inset(100% 0 0 0) wegziehen. Alternative ohne Umhängen: clip-path von einem kleinen Fenster auf inset(0) mit Gegen-Scale des Bildes. Fallstrick: Kein Element klonen oder ersetzen, sonst flackert der Bildwechsel. Die Übergabe erst starten, wenn Schriften und Bilder wirklich geladen sind (document.fonts.ready, img.decode()).",
   "mobil": "Funktioniert gut. Die Fenstergröße relativ zur kürzeren Bildschirmseite wählen. Ziele, die im einspaltigen Layout unter dem sichtbaren Bereich liegen, reisen aus dem Bild; das wichtigste Element (Hero-Bild) sollte oben landen.",
   "reduzierte_bewegung": "Elemente stehen sofort in Endposition, kurzer Fade. Kein Zähler, kein Wischen.",
   "barrierefreiheit": "Während des Loaders aria-busy=\"true\" am main, danach entfernen. Den Fokus nicht verschieben. Das Loader-Panel ist aria-hidden; die Kennzahl bleibt als normaler Text im Layout lesbar."
  },
  "geprueft": "01.11.2026",
  "notiz": "Startseite der erfundenen Reportage- und Porträtfotografin „Mira Sand Fotografie, Berlin“, Serie 07 „Nach der Kohle“ (100 Porträts aus der Lausitz). Gestaltung nach Rezept „fotograf-film-bild-zuerst“: neutrale Fläche #f4f4f2, Tinte #141414, Platzhalter-Grau #e6e6e6, Loader als dunkle Film-Fläche #0e0e0e; Instrument Serif nur für Name, Serientitel und Kennzahl, Instrument Sans für Text, Fragment Mono für Zähler, Bildunterschrift und Labels. Die vier Serienbilder (Porträt am Restsee, Kühltürme bei Nacht, Schwimmhalle von oben, Umkleide) werden beim Start auf Canvas gemalt und als echte <img> geladen; der Loader wartet auf fonts.ready und img.decode(). Die Wortmarke, der Zähler (wird die Kennzahl „100 Porträts in der Serie“), der Ladebalken (wird die Linie unter der Navigation) und das Ladebild sind dieselben Knoten wie im Layout und werden nur umgehängt. Umschalter: Bild-Flip (1000 ms), Clip-Fenster (1000 ms) und Stapel → Raster (1800 ms). Die Vorführung wechselt die drei Varianten in Schleife. Bewegungswerte gegenüber der Fassung vom 31.10.2026 unverändert. 01.11.2026 (AD): Bis fonts.ready und img.decode() fertig sind, ist alles außer dem Panel unsichtbar (data-wartet), damit am Panelrand keine halbfertige Seite aufblitzt."
 }
}