Farbenfluss

Farben mittels JavaScript fliessen lassen

Was geleistet wird

Mittels JavaScript wird die Hintergrundfarbe eines beliebigen Html-Elements, der durch sein "id" Attribut identifiziert wird, schrittweise per Timer-Aufrufe von einem Ausgangswert bis zu einem Endwert verschoben. Dabei werden die R-G-B Komponenten der Farbe getrennt voneinander angepasst (mit je eigenen Inkrementwerten). Der optische Effekt davon ist, dass die Hintergrundfarbe sich fliessend verändert.

Viele gleichzeitige Vorgänge

Da der Code ursprunglich für Rollover-Effekte in Menu-Buttons entwickelt wurde, muss es beliebig viele Vorgänge gleichzeitig verwalten. Dazu werden alle derzeit aktiven Vorgänge in einem Array verwaltet, das Elemente eines eigenen Objekttyps enthält. Schlüssel ist das "id" Attribut des verwalteten Elements. Ein weiteres ist, ob der Mauszeiger sich immer noch über das Element befindet.

Denn wird die Maus schnell über das ganze Menu bewegt, verlässt sie ein Button, eher der Farbenfluss vollendet ist. Das Verlassen wird notiert, aber der aktuelle Fluss läuft zu Ende, und der umgekehrte Fluss wird ggf. erst danach eingeleitet, damit die Farbübergänge nicht abgehackt sind. Das kann zu einer Art angenehmen "Nachglühens" führen, wie Sie hier links im Menu direkt sehen können.

Einsatzmöglichkeiten

Das Paket wie ausgeliefert verwaltet zwei Farbsätze (von je Basisfarbe, Gipfelfarbe sowie Inkremente), die Wahl des zu verwendenden Satzes erfolgt im jeweiligen JS-Aufruf. Ein Ausbau für weitere Farbsätze wäre trivial. Die Nutzungsmöglichkeiten sind vielfältig:

Weiche Farbveränderung bei Menu-Buttons (statt :hover, aber mit :hover als Fallback ohne JavaScript)
Aufglühen von Container-Elementen beim Betreten einer Seite
Mit entsprechenden Eingriffen im Code könnte anstatt der Hintergrundfarbe eine andere Eigenschaft schrittweise verändert werden, z.B. die Schriftfarbe, oder auch die Position eines Elements (Marquee-Effekt).

Technische Notizen

Das "Paket" besteht aus einer JavaScript-Datei von ca. 220 Zeilen, die Sie im <head> Bereich einer Seite einbinden müssen. Die individuelle Konfiguration erfolgt in einem kommentierten Bereich am Anfang dieser Datei. Die nötigen Anpassungen der Html-Seite für bidirektionales wie auch monodirektionales Fliessen sind in der begleitenden Readme-Datei geschildert.

Zum Herunterladen bitte einloggen.