🛠 Lauflicht
Die Inhalte dieser Webseite wurden zuletzt am
29.11.2022
aktualisiert.
Beispiel: Virtueller Equalizer
Lineare Bewegungen von Objekten
Lineare Bewegungen von Objekten
Pulsierend und Linear
Es ist ziemlich einfach - mit einer Kombination von mehreren blinkenden Flächen kannst Du Lauflichtleisten entwickeln, aber auch durch die lineare Bewegung von einzelnen Objekten - zudem können auch noch beide Varianten kombiniert werden. Die Fläche kann dabei beliebig groß definiert werden, ebenso diverse Intervall-Einstellungen. Selbstverständlich kannst Du alle Farben für den Lauflicht-Effekt selbst bestimmen - und die Abläufe in verschiedenen Szenen automatisiert voreinstellen.
Lineare Bewegung
Pulsierende Objekte
Pulsierendes Objekt mit linearer Bewegung
➀ Beispiel
⤄ Duale Laufrichtung
Szenen
Grundsätzlich können die Lauflicht-Objekte in verschiedenen Szenen erstellt werden, wobei einfache Effekte problemlos in einer einzelnen Szene dargestellt werden können. Komplexe Darstellungen dagegen, die sich durch Steuerungsaktionen verändern, sollten in mehrere Szenen aufgeteilt werden, damit die Webseite nicht unnötig ausgebremst wird.
➁ Beispiel
⇋ Entgegengesetzte Laufrichtung
Hintergrund
Standardmäßig ist der Hintergrund von html5-Animationen weiß - Du hast aber auch die Möglichkeit, ihn entsprechend deiner Vorstellung einzufärben, indem Du eine Farbe auswählst. Möchten Du ein Bild als Hintergrund verwenden, legst Du es einfach als Bildobjekt über die ganze Größe der Animation.
➂ Beispiel
⇹ Kombinierte Laufrichtungen
Bézier-Bewegungen
Neben den geradlinigen Bewegungen kannst Du auch für Bögen, Kurven oder Kreise eine Lauflicht-Animation erstellen.
➃ Beispiel
⮔ Flexible Laufrichtungen
Alle Angaben beziehen sich auf Angehörige aller Geschlechter - zur besseren Lesbarkeit habe ich im Text die männliche Form gewählt.