KNALL & KANTE — ZEHN STARTSEITEN-HINTERGRÜNDE

VORSCHAU
Die ZIP-Datei vollständig entpacken und index.html im Browser öffnen.
01, 02, 04 und 05 sind ruhige Bildmotive (WebP). 03 und 06–10 sind bewegte, auf Mausbewegungen reagierende Hintergründe.
03 – Prismenglas verbindet das ursprüngliche Bildmotiv mit sanftem Schweben und wandernden Lichtreflexen. Das unveränderte WebP ist ebenfalls enthalten.
Mit „Text ausblenden“ das Motiv ohne Seitentext ansehen. Animationen lassen sich pausieren und beachten die Systemeinstellung für reduzierte Bewegung.

DATEIEN
assets/           Fünf Originalmotive als optimierte WebP-Bilder und kleine Vorschaubilder.
downloads/        Sechs eigenständige HTML-Dateien mit Animation, Stil und Mausreaktion sowie die Einzelpakete als ZIP.
backgrounds.css   Gemeinsame Gestaltung der animierten Hintergründe.
studio.css/js     Darstellung und Umschaltung der Vergleichsseite.

VERWENDUNG
Du kannst die enthaltenen Hintergründe für deine eigene Website verwenden und anpassen. Ersetze beim Einbau die Namen, Logos, Beispieltexte und Links der Vorschau durch deine eigenen Inhalte.

Ein Bildmotiv lässt sich als CSS-Hintergrund einsetzen, zum Beispiel:
background: #080b18 url('./assets/01-seidenlicht.webp') 62% center / cover no-repeat;
Die generierten Bildmotive sind 1672 × 941 Pixel groß. Text und Bedienelemente gehören zur Vorschau und sind nicht in die Bilddateien eingebrannt.

Die Dateien unter downloads/ funktionieren einzeln ohne Internet oder zusätzliche Bibliotheken. Beim Einbauen in eine bestehende Seite den .kk-scene-Bereich, dessen Stilregeln und die passende Bedienlogik übernehmen. Die feste Vollbildpositionierung des Beispiels auf einen absolut positionierten Bereich in der gewünschten Sektion umstellen. Den Pausenschalter und die Rücksicht auf reduzierte Bewegung erhalten. Die IDs in den SVGs bei mehrfacher Verwendung auf derselben Seite eindeutig benennen.

Die Auswahl in der Vorschau ändert nur die Vorschau. Die bestehende Startseite wird dadurch nicht automatisch umgestellt.

GESTALTUNG
Bildmotive: mit dem integrierten image_gen-Werkzeug für Knall & Kante erstellt.
Animationen: eigenständige CSS-/SVG-Entwürfe für Knall & Kante.
