{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "footer-reveal",
 "name": "Footer-Reveal (Footer liegt unter der Seite)",
 "name_en": "Revealing / underlay footer (sticky footer reveal, parallax footer) / Sticky / fixed footer reveal (curtain footer)",
 "kurz": "Die Seite hebt sich am Ende wie ein Vorhang und legt einen Footer frei, der schon darunter liegt.",
 "kategorie": "Footer",
 "kategorie_slug": "footer",
 "kategorie_nr": 13,
 "bau_chat": "C6",
 "prioritaet": "A",
 "trendstatus": "etabliert",
 "belegstatus": "belegt",
 "website_belege": 2,
 "stimmung": [
  "ruhig",
  "editorial",
  "luxuriös",
  "filmisch"
 ],
 "stimmung_roh": [
  "räumlich",
  "elegant",
  "ruhig",
  "kinematisch",
  "geschichtet"
 ],
 "technik": [
  "css",
  "gsap",
  "scrolltrigger",
  "scroll-driven-css"
 ],
 "technik_gruppen": [
  "css",
  "gsap"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Der Footer liegt hinter dem Hauptinhalt am unteren Rand. Der Hauptinhalt hat einen deckenden Hintergrund und scrollt am Ende wie ein Vorhang nach oben weg. Darunter wird der Footer sichtbar, er bewegt sich selbst nicht. In der Parallax-Variante liegt der Footer im Fluss: Sein Inhalt startet um 25 % nach oben versetzt und gleitet scrollgekoppelt in die Endposition, ein dunkles Overlay hellt dabei auf. Runde Ecken, ein Schatten oder eine Wölbung an der Unterkante des Inhalts betonen die zwei Ebenen.",
  "warum_es_wirkt": "Die räumliche Schichtung macht das Seitenende zum Ereignis, ohne Inhalte zu animieren. Der Footer wirkt wie eine Belohnung und wird zur Bühne für den Kontakt. Die Seite fühlt sich geschichtet an statt flach.",
  "wann_einsetzen": "Portfolios, Studios, Agenturen und Landingpages mit gestaltetem Footer: Abschluss-CTA, Wortmarke, Kontakt.",
  "wann_nicht": "Wenn der Footer höher als der Viewport ist: Dann bleibt ein Teil unerreichbar oder es ruckelt. Ebenfalls nicht bei sehr kurzen Seiten und bei Infinite Scroll.",
  "varianten": [
   "Sticky: footer position: sticky; bottom: 0 hinter main, reines CSS ohne Platzhalter",
   "Fixed: position: fixed und padding-bottom am body (klassisch) oder fixed in einem clip-path-Wrapper",
   "Parallax: Footer-Inhalt aus yPercent -25, Overlay opacity .5 → 0, linear per ScrollTrigger (Huge, Osmo)",
   "Wölbung: Unterkante des Inhalts mit großem Bogen, der beim Freilegen flach wird (Dennis Snellenberg)",
   "Runde Ecken und Schatten an der Unterkante des Inhalts",
   "Opacity-Fade: Footer blendet beim Freilegen von transparent zu deckend (Motion-Beispiel)"
  ],
  "umsetzung": "Sticky: footer { position: sticky; bottom: 0; z-index: 0 } und main { position: relative; z-index: 1; background: var(--bg); transform: translate3d(0,0,0) }. Das translate3d behebt einen Stacking-Fehler in Safari. Am Seiten-Wrapper overflow: clip statt hidden, sonst bricht sticky. Parallax: Footer im Fluss mit overflow: hidden, darin Inhalt und ein absolutes Overlay mit opacity 0. gsap.timeline({ scrollTrigger: { trigger: footer, start: 'clamp(top bottom)', end: 'clamp(top top)', scrub: true } }).from(inner, { yPercent: -25, ease: 'linear' }).from(dark, { opacity: .5, ease: 'linear' }, '<'). Das Overlay geht dabei von .5 auf 0, der Footer hellt also auf; die Richtung bewusst wählen. Fixed mit clip-path: Wrapper mit bekannter Höhe und clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%), darin der Footer mit position: fixed. clip-path beschneidet auch fixed-Kinder, das ist der Kern des Tricks. Die Höhe per CSS-Variable oder ResizeObserver pflegen. Ohne JS geht auch animation-timeline: view() auf dem Footer mit animation-range entry. Immer: Footerhöhe ≤ 100svh.",
  "mobil": "Funktioniert. Footer kürzer als 100svh halten, sonst normaler Footer. Mit der iOS-Adressleiste testen, svh-Einheiten nutzen. Parallaxe bei Bedarf abschalten.",
  "reduzierte_bewegung": "Die Sticky-Variante kann bleiben, sie hat keine eigene Bewegung. Parallaxe und scrollgekoppelte Formänderungen entfernen, den Footer dann normal im Fluss zeigen.",
  "barrierefreiheit": "Der Footer bleibt im DOM und in natürlicher Reihenfolge am Ende des Tab-Flusses. Bei der Sticky-Variante kann ein fokussierter Footer-Link unter dem Inhalt liegen: Bei focusin im Footer ans Seitenende scrollen. Fokus deutlich sichtbar halten. Dekorative Wortmarken mit aria-hidden versehen."
 },
 "messwerte": {
  "easing": "linear (scrub)",
  "dauer_ms": "scrollgekoppelt",
  "stagger_ms": "",
  "distanz": "yPercent -25 → 0",
  "sonstiges": "Overlay opacity .5 → 0; nur bei prefers-reduced-motion: no-preference (Huge)",
  "herkunft": "beobachtet",
  "quelle": "https://www.hugeinc.com/_next/static/chunks/1f-1ulm372ici.js",
  "aus_eintrag": [
   "footer-reveal-unterlage"
  ]
 },
 "kurve": {
  "bezier": [
   0,
   0,
   1,
   1
  ],
  "css": "cubic-bezier(0, 0, 1, 1)",
  "name": "linear",
  "dauer_ms": null
 },
 "gesehen_bei": [
  {
   "seite": "Piccalilli: Sticky revealing footer",
   "url": "https://piccalil.li/blog/sticky-revealing-footer",
   "auszeichnung": "",
   "beobachtung": "footer sticky bottom:0 z-index:0, main relative z-index:1 mit Hintergrund; Safari-Fix translate3d(0,0,0) auf main.",
   "art": "artikel"
  },
  {
   "seite": "Osmo: Footer Parallax Effect",
   "url": "https://www.osmo.supply/resource/footer-parallax-effect",
   "auszeichnung": "Osmo-Ressource",
   "beobachtung": "ScrollTrigger scrub, start clamp(top bottom), end clamp(top top), Footer from yPercent -25, Overlay from opacity .5, beide linear.",
   "art": "demo"
  },
  {
   "seite": "Motion: Footer reveal (Beispiel)",
   "url": "https://motion.dev/examples/react-footer-reveal",
   "auszeichnung": "",
   "beobachtung": "Sticky Footer unter der Seite, blendet beim Freilegen von transparent zu deckend.",
   "art": "demo"
  },
  {
   "seite": "Olivier Larose – Sticky Footer",
   "url": "https://blog.olivierlarose.com/tutorials/sticky-footer",
   "auszeichnung": "",
   "beobachtung": "Zwei Methoden: fixed + clipPath polygon auf 800px-Wrapper; oder sticky mit Wrapper h-[calc(100vh+800px)] -top-[100vh], sticky top-[calc(100vh-800px)].",
   "art": "artikel"
  },
  {
   "seite": "Huge",
   "url": "https://www.hugeinc.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (Chunk 1f-1ulm372ici.js): gsap.matchMedia(\"(prefers-reduced-motion: no-preference)\") – [data-footer-parallax-inner] from yPercent -25, [data-footer-parallax-dark] from opacity .5, ScrollTrigger start \"clamp(top bottom)\", end \"clamp(top top)\", scrub true, ease linear.",
   "art": "website"
  },
  {
   "seite": "Dennis Snellenberg",
   "url": "https://dennissnellenberg.com/",
   "auszeichnung": "",
   "beobachtung": "Live geprüft (HTML): gewölbte Kante .footer-rounded-div über dem Footer, footer.section.footer mit data-scroll-speed=\"-4\" data-scroll-position=\"bottom\" (Locomotive Scroll) – Footer fährt verzögert unter der Seite hervor.",
   "art": "website",
   "browser_gemessen": true
  }
 ],
 "tutorials": [
  {
   "titel": "Piccalilli: Sticky revealing footer",
   "url": "https://piccalil.li/blog/sticky-revealing-footer"
  },
  {
   "titel": "Osmo: Footer Parallax Effect",
   "url": "https://www.osmo.supply/resource/footer-parallax-effect"
  },
  {
   "titel": "SuperHi: The revealing footer effect",
   "url": "https://library.superhi.com/posts/the-revealing-footer-effect"
  },
  {
   "titel": "Framer Academy: Fixed footer reveal",
   "url": "https://www.framer.com/academy/lessons/fixed-footer-reveal"
  },
  {
   "titel": "Olivier Larose – Sticky Footer",
   "url": "https://blog.olivierlarose.com/tutorials/sticky-footer"
  }
 ],
 "kombinierbar_mit": [
  "footer-cta-riesen-wortmarke",
  "footer-3d-buehne",
  "section-overlap-uebergang",
  "marquee-laufband"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/footer/footer-reveal/",
  "meta": "https://cecodesign.de/lab/fundus/footer/footer-reveal/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/footer/footer-reveal/demo"
 },
 "herkunft": {
  "quelldateien": [
   "navigation.json",
   "scroll.json",
   "patch-belege-3.json"
  ],
  "pruefnotizen": [
   "patch-belege-3.json: Zwei Produktionsbelege; Awwwards-Inspirationen entfernt."
  ],
  "zusammengelegt_aus": [
   "footer-reveal-unterlage",
   "footer-reveal"
  ],
  "querverweis_kategorien": [
   "Scroll & Section-Animationen"
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Die Seite hebt sich am Ende wie ein Vorhang und legt einen Footer frei, der schon darunter liegt.",
  "demo": true,
  "abhaengigkeiten": [
   "gsap@3.15.0",
   "ScrollTrigger@3.15.0"
  ],
  "werte": {
   "easing": "linear (scrub: true)",
   "dauer_ms": "scrollgekoppelt, Freilegung über die Footerhöhe",
   "footer_hoehe": "min(92svh, 46rem); unter 760px Breite min(84svh, 40rem)",
   "sticky": "footer { position: sticky; bottom: 0; z-index: 0 } · main { position: relative; z-index: 1; background: deckend; transform: translate3d(0,0,0) } · Wrapper overflow: clip",
   "sticky_ecken": "border-radius 0 0 clamp(20px, 2.6vw, 36px) clamp(20px, 2.6vw, 36px) · box-shadow 0 30px 60px -30px rgba(0,0,0,.45)",
   "parallax_distanz": "Footer-Inhalt yPercent -25 → 0",
   "parallax_overlay": "schwarzes Overlay opacity .5 → 0",
   "parallax_trigger": "start 'clamp(top bottom)', end 'clamp(top top)', scrub true, ease 'linear'",
   "woelbung": "Bogen unter main: Höhe clamp(56px, 9vw, 140px) × (1 − Freilegung) → 0 · border-radius 0 0 50% 50% / 0 0 100% 100% · box-shadow 0 34px 50px -34px rgba(0,0,0,.5) · Footer sticky",
   "ui_ms": 150,
   "fokus": "focusin im Footer scrollt ans Seitenende"
  },
  "ausloeser": "scroll",
  "touch": "Gleiches Verhalten per Fingerscroll; Footer auf 390 px kürzer (min(84svh, 40rem)), Spalten zweispaltig, Umschalter oben über volle Breite.",
  "reduziert": "Keine Parallaxe und keine Formänderung: Parallax-Variante zeigt den Footer normal im Fluss, Wölbung wird zu festen runden Ecken, Sticky bleibt unverändert (bewegt sich nicht selbst). Vorführung springt ohne weiches Scrollen.",
  "korrekturen": {
   "beschreibung": "Der Footer liegt hinter dem Hauptinhalt am unteren Rand. Der Hauptinhalt hat einen deckenden Hintergrund und scrollt am Ende wie ein Vorhang nach oben weg. Darunter wird der Footer sichtbar, er bewegt sich selbst nicht. In der Parallax-Variante liegt der Footer im Fluss: Sein Inhalt startet um 25 % nach oben versetzt und gleitet scrollgekoppelt in die Endposition, ein dunkles Overlay hellt dabei auf. Runde Ecken, ein Schatten oder eine Wölbung an der Unterkante des Inhalts betonen die zwei Ebenen.",
   "warum_es_wirkt": "Die räumliche Schichtung macht das Seitenende zum Ereignis, ohne Inhalte zu animieren. Der Footer wirkt wie eine Belohnung und wird zur Bühne für den Kontakt. Die Seite fühlt sich geschichtet an statt flach.",
   "wann_einsetzen": "Portfolios, Studios, Agenturen und Landingpages mit gestaltetem Footer: Abschluss-CTA, Wortmarke, Kontakt.",
   "wann_nicht": "Wenn der Footer höher als der Viewport ist: Dann bleibt ein Teil unerreichbar oder es ruckelt. Ebenfalls nicht bei sehr kurzen Seiten und bei Infinite Scroll.",
   "varianten": [
    "Sticky: footer position: sticky; bottom: 0 hinter main, reines CSS ohne Platzhalter",
    "Fixed: position: fixed und padding-bottom am body (klassisch) oder fixed in einem clip-path-Wrapper",
    "Parallax: Footer-Inhalt aus yPercent -25, Overlay opacity .5 → 0, linear per ScrollTrigger (Huge, Osmo)",
    "Wölbung: Unterkante des Inhalts mit großem Bogen, der beim Freilegen flach wird (Dennis Snellenberg)",
    "Runde Ecken und Schatten an der Unterkante des Inhalts",
    "Opacity-Fade: Footer blendet beim Freilegen von transparent zu deckend (Motion-Beispiel)"
   ],
   "umsetzung": "Sticky: footer { position: sticky; bottom: 0; z-index: 0 } und main { position: relative; z-index: 1; background: var(--bg); transform: translate3d(0,0,0) }. Das translate3d behebt einen Stacking-Fehler in Safari. Am Seiten-Wrapper overflow: clip statt hidden, sonst bricht sticky. Parallax: Footer im Fluss mit overflow: hidden, darin Inhalt und ein absolutes Overlay mit opacity 0. gsap.timeline({ scrollTrigger: { trigger: footer, start: 'clamp(top bottom)', end: 'clamp(top top)', scrub: true } }).from(inner, { yPercent: -25, ease: 'linear' }).from(dark, { opacity: .5, ease: 'linear' }, '<'). Das Overlay geht dabei von .5 auf 0, der Footer hellt also auf; die Richtung bewusst wählen. Fixed mit clip-path: Wrapper mit bekannter Höhe und clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%), darin der Footer mit position: fixed. clip-path beschneidet auch fixed-Kinder, das ist der Kern des Tricks. Die Höhe per CSS-Variable oder ResizeObserver pflegen. Ohne JS geht auch animation-timeline: view() auf dem Footer mit animation-range entry. Immer: Footerhöhe ≤ 100svh.",
   "mobil": "Funktioniert. Footer kürzer als 100svh halten, sonst normaler Footer. Mit der iOS-Adressleiste testen, svh-Einheiten nutzen. Parallaxe bei Bedarf abschalten.",
   "reduzierte_bewegung": "Die Sticky-Variante kann bleiben, sie hat keine eigene Bewegung. Parallaxe und scrollgekoppelte Formänderungen entfernen, den Footer dann normal im Fluss zeigen.",
   "barrierefreiheit": "Der Footer bleibt im DOM und in natürlicher Reihenfolge am Ende des Tab-Flusses. Bei der Sticky-Variante kann ein fokussierter Footer-Link unter dem Inhalt liegen: Bei focusin im Footer ans Seitenende scrollen. Fokus deutlich sichtbar halten. Dekorative Wortmarken mit aria-hidden versehen."
  },
  "geprueft": "01.11.2026",
  "notiz": "Portfolio-Ende des erfundenen Markenbüros Studio Stoll (Mannheim) mit Ziegel-Footer, CTA, Kontaktspalten und Riesen-Wortmarke. Drei Varianten per Umschalter: Parallax (Huge/Osmo-Werte per GSAP ScrollTrigger), Wölbung (Bogen flacht über CSS-Variable --p ab) und Sticky mit runden Ecken. Die Werte-Anzeige zeigt die Werte und den Freilegungsgrad live. Die Vorführung scrollt ans Ende und zurück und wechselt jede Runde die Variante. focusin im Footer scrollt ans Seitenende. Korrektur 01.11.2026: Am Desktop verdeckte das Bedienfeld oben rechts die Hauptnavigation. Es sitzt jetzt ab 761 px bei top 80 px (unter der 64 px hohen Kopfleiste) und rechts auf dem Seitenrand (--rand); Navigation und Footer-Spalten bleiben frei. Auf dem Telefon unverändert oben über volle Breite. Bilder 01.11.2026: eigene Bilder statt Portfolio. Zugang 02.11.2026: --tinte-leise .56 → .64; Ziegel #b5452d → #ad422b (gleicher Ton, minimal dunkler) und im Footer --creme-leise .66 → .91 (4,6:1); Feinzeile z-index 1 über der Wortmarke (Fokus nicht verdeckt); Held-Titel clamp(min(40px, 10.4vw), 6.6vw, 104px) gegen Abschneiden bei 320 px; Kontrastmodus-Rahmen für Knöpfe."
 }
}