Dynamic Light

Das Dynamic Light-Webprojekt ist eine interaktive Webanwendung, die einen visuell ansprechenden Lichteffekt erzeugt, der auf die Bewegungen des Nutzers reagiert. Durch die Nutzung von Webtechnologien wie HTML, CSS und JavaScript wird ein interaktives Erlebnis geschaffen, bei dem sich ein Lichteffekt dynamisch entsprechend der Position des Mauszeigers (oder eines anderen Zeigegeräts) auf der Webseite bewegt.

Zusammenfassung

Struktur
Das Projekt besteht aus drei Hauptdateien, die zusammenarbeiten, um die Funktionalität und das Design der Anwendung zu realisieren:

index.html: Die HTML-Datei definiert die Struktur der Webseite. Sie enthält die Grundelemente wie den Container für den Hintergrund (#scene), einen Overlay-Container (#sceneOverlay) für den Lichteffekt und ein <main>-Element, das den Titel der Anwendung (<h1>Dynamic Light</h1>) enthält.

visual.css: Die CSS-Datei stellt das visuelle Design der Anwendung bereit. Sie definiert Stile für die Basis-Elemente, den Hintergrund, den Lichteffekt und typografische Elemente. Zentrale Design-Elemente sind die Verwendung von CSS-Variablen für die dynamische Anpassung des Lichteffekts (--lightX, --lightY) und die Gestaltung des Hintergrunds und des Lichteffekt-Overlays.

interaction.js: Die JavaScript-Datei fügt die interaktive Funktionalität hinzu. Sie enthält eine Funktion dynamicLight, die bei Bewegung des Mauszeigers aktiviert wird. Diese Funktion aktualisiert die CSS-Variablen --lightX und --lightY basierend auf der Position des Mauszeigers, was den Lichteffekt dynamisch und interaktiv macht.
Funktionsweise

Beim Laden der Webseite wird der Hintergrund (#scene) mit einem Bild geladen und ein Blur-Effekt angewendet, um einen Tiefenschärfeeffekt zu erzeugen.

Der Overlay-Container (#sceneOverlay) verwendet eine Maske, die einen radialen Gradienten erzeugt. Dieser Gradient ist so konfiguriert, dass er transparent im Zentrum ist und nach außen hin undurchsichtig wird, wodurch der Eindruck eines Lichtkegels entsteht.
Durch Bewegen des Mauszeigers auf der Webseite werden die Positionswerte des Lichteffekts aktualisiert, was den Eindruck erweckt, dass der Lichtkegel dem Mauszeiger folgt.