{ "$schema": "../../schema.json", "schema": "fundus/1", "id": "kapitel-kante-signatur", "name": "Kapitel-Kante als Signatur", "name_en": "Signature chapter edge (scroll-driven brand divider)", "kurz": "Die Kante zwischen zwei Kapiteln trägt die Leitidee: ein Bleistiftstrich, eine Wölbung wie ein Atemzug, eine Treppe mit Höhenkote oder eine Uhrzeit, die über Nacht weiterläuft, gezeichnet vom Scroll.", "kategorie": "Scroll & Section-Animationen", "kategorie_slug": "scroll", "kategorie_nr": 5, "bau_chat": "C2", "prioritaet": "A", "trendstatus": "aufsteigend", "belegstatus": "quellenbelegt", "website_belege": 0, "stimmung": [ "filmisch", "warm" ], "stimmung_roh": [ "warm", "handwerklich", "erzählend" ], "technik": [ "css", "scroll-driven-css", "@property", "svg", "vanilla-js", "clip-path" ], "technik_gruppen": [ "css", "js", "canvas" ], "leistungskosten": "niedrig", "steckbrief": { "beschreibung": "Die Kante zwischen zwei Kapiteln trägt die Leitidee der Marke über die ganze Seite. Bei der Tischlerei ist es ein Bleistiftstrich mit Anrissmarke, bei der Bäckerei eine Uhrzeit, die über Nacht weiterläuft, beim Bauunternehmen eine Treppe mit Höhenkote, beim Yogastudio eine Fläche, die sich wie ein Atemzug aufwölbt. Die Kante entsteht beim Scrollen (scroll-getrieben, mit Rückfall für ältere Browser), trägt auf Wunsch ein Kapitel-Wort oder eine Uhrzeit und sieht auf jeder Seite gleich aus. So wird aus einer Idee im Hero ein Ordnungsprinzip.", "warum_es_wirkt": "Eine Leitidee, die nur im Hero steht, ist nach dem ersten Bildschirm vergessen. Kehrt dieselbe Form an jeder Kapitelgrenze wieder, wird sie zur Handschrift: Man erkennt die Seite an der Kante wieder, nicht an einer Karte. Die Bewegung ist an den Scroll gebunden und damit an die Lesegeschwindigkeit. Sie zeigt den Übergang genau dann, wenn er passiert, und steht danach still. Trägt die Kante eine Station oder Uhrzeit, ordnet sie den Inhalt zusätzlich als Geschichte (erst das, dann das).", "wann_einsetzen": "Wenn das Rezept oder die Probe eine Leitidee hat, die eine Form hergibt: Strich, Wölbung, Stufe, Uhrzeit, Station. Für Startseiten und Kapitelseiten mit drei bis sechs Kapiteln. Handwerk, Bäckerei und Lebensmittelhandwerk, Bau und Immobilien, Praxis und Yoga, Weingut, Gebäudedienste. Die Variante zeitachse für Betriebe mit einem Tagesablauf oder Arbeitsgang (Backstube, Brauerei, Pflege, Hofladen).", "wann_nicht": "Nicht als Schmuck zwischen jeder Sektion einer langen Seite: höchstens eine Kante je Kapitelgrenze, auf Unterseiten sparsam. Nicht in Formularen, Preislisten und Rechtstexten. Nicht, wenn die Form nichts bedeutet; dann reicht sektionskante-shape als stille Kante ohne Bewegung. Die Kante schneidet nie Überschriften oder Bilder an: der Abschnitt davor braucht unten so viel Abstand, wie die Kante hoch ist. Keine erfundenen Uhrzeiten oder Arbeitsschritte, die Abläufe kommen vom Betrieb.", "varianten": [ "linie: ein gezeichneter Strich (Bleistift, Kreide, Abzieher) läuft beim Scrollen über die Breite, an der Spitze ein kleines Werkzeug, mit Anrissmarke und Kapitel-Wort", "woelbung: die Fläche des nächsten Kapitels wölbt sich auf (Atemzug, Laib, Kissen), mit kurzem Überschwingen und Kapitel-Wort auf dem Scheitel", "stufe: die Kante tritt Stufe für Stufe heraus (Treppe, Raster, Terrasse), an der obersten Stufe eine Höhenkote", "zeitachse: jede Kante trägt eine fortlaufende Uhrzeit oder Station, eine mitlaufende Uhr zählt zwischen den Kapiteln weiter, die Flächen wechseln von Nacht zu Morgen" ], "umsetzung": "1) Kante als eigenes Element am Anfang jedes Kapitels (
plus ein sichtbares Kapitel-Wort als echter Text). Sie ragt mit negativem Abstand in den Abschnitt davor; der Abschnitt davor hat unten mindestens Kantenhöhe plus Luft. 2) Ein registrierter Fortschritt @property --kp (, 0 bis 1). Er wird per animation: kante-kp linear both; animation-timeline: view(); animation-range-start: cover 5%; animation-range-end: cover 50% gesetzt. Wichtig: animation-range immer als Langform und nach der Kurzschreibweise animation, sonst setzt animation sie auf normal zurück. 3) Alle Teile der Kante rechnen nur aus --kp: stroke-dashoffset (linie), transform: scaleY (woelbung), scaleY je Stufe mit clamp(0, --kp * n − i, 1) (stufe), Strichlänge und Uhrzeit (zeitachse). Nur transform, opacity und stroke, kein Layout. 4) Rückfall ohne animation-timeline: ein passiver Scroll-Listener mit requestAnimationFrame rechnet denselben Fortschritt aus getBoundingClientRect und setzt --kp je Kante. 5) Reduzierte Bewegung: --kp: 1, die Kante steht fertig da. 6) zeitachse: die mitlaufende Uhr liest den Fortschritt der Kapitel und schreibt die Zeit per textContent, aria-hidden; die echte Uhrzeit steht als