EINBAUBEISPIEL · OHNE BIBLIOTHEK

Formen, die dem Scrollen folgen.

Nach unten scrollen. Die Bewegung ist an die Seitenposition gebunden und respektiert reduzierte Bewegung.

Zurück zur nummerierten Übersicht

001 · Drehung

001 · Penrose-DreieckV3: Analytische Geometrie. Gerade Kanten mit zwei Endpunkten; Kurven als geometrische SVG-Elemente.

Ein statisches SVG mit einer scrollgesteuerten Transformation. Beim Zurückscrollen läuft die Bewegung in Gegenrichtung.

037 · Räumliches Kippen

037 · Hexagon-WirbelV3: Geraden und Knoten bereinigt. Gerade Kanten mit zwei Endpunkten; Kurven als geometrische SVG-Elemente.

Ein statisches SVG mit einer scrollgesteuerten Transformation. Beim Zurückscrollen läuft die Bewegung in Gegenrichtung.

072 · Diagonale Bewegung

072 · Doppelte BandschlaufeV3: Geraden und Knoten bereinigt. Gerade Kanten mit zwei Endpunkten; Kurven als geometrische SVG-Elemente.

Ein statisches SVG mit einer scrollgesteuerten Transformation. Beim Zurückscrollen läuft die Bewegung in Gegenrichtung.

So baust du eine Form ein

<section data-scroll-scene>
  <div data-scroll-shape data-motion="rotate" data-amount="100">
    <!-- Gewünschtes SVG hier INLINE einfügen. -->
  </div>
</section>
<script src="scroll-shapes.js" defer></script>

Dem SVG eine Breite oder maximale Breite geben. Die Szenenhöhe bestimmt die Scrollstrecke. data-motion: rotate, depth, rise oder reveal. data-amount regelt den Ausschlag. Inline-SVGs übernehmen bei einfarbigen Konturen die CSS-Farbe über currentColor. Bei externen <img>-Dateien muss die Farbe im SVG selbst gesetzt werden.

Farbe für jedes Inline-SVG über .web-shape { color: #ff6688; }. Alle Pfade nutzen ausschließlich stroke="currentColor" und fill="none".
Mehrere Inline-SVGs: die optionalen IDs shape-… entfernen oder pro Instanz eindeutig vergeben. Eine nachgeladene Szene mit ScrollShapes.refresh() registrieren.