Hintergrund Farbwechsel mit Hintergrundbild
Ein Hintergrund mit einem Farbwechsel Effekt zu versehen ist recht einfach. Um zu verstehen, wie die folgenden Anweisungen sich auswirken, gehen wir davon aus, dass wir ein Hintergrundbild haben, das teilweise transparent ist. Die verschiedenen Ebenen der Webseite liegen wie Schichten übereinander, das was am weitesten oben liegt, verdeckt die darunterliegenden Schichten. Ganz unten ist ein einfarbiger Hintergrund, dessen farbe ich definieren kann, darüber liegt das Hintergrundbild, über dem der eigentliche Inhalt der Webseite liegt.
Möchte ich z.B. Teile eines Bildes, sagen wir mal einen Mond, mit Nebel, der vom Mondlicht angestrahlt wird farblich verändern, von weißlich zu rötlich bläulich... Dann bearbeite ich zunächst das Bild und mache die Teile transparent, welche von dem Farbwechsel betroffen sein sollen. Die kann man erreichen indem man mit einem Grafikprogramm ein oder mehrere Farben zu transparent ändert. Nun legt man dieses Hintergrundbild über den einfarbigen Hintergrund und animiert die Hintergrundfarbe mit einer Farbwechsel-Anweisung. Dazu sei gesagt, dass alle modernen Browser (nicht Internet Explorer - IE) das inzwischen nativ unterstützen. In der Hoffnung, dass der IE bald ausstirbt! Auf das eqdkp-Plus System bezogen heisst das , daß ihr im Adminpanel den Style bearbeitet und dort das Hintergrundbild hoch ladet. Der CSS-Code, welche den farbwechsel animiert, kamm man zunächst Testweise mal im Adminbereich unter Global - Globales CSS einfügen. Später sollte er dann jedoch in die Custom.css verschoben werden, für den Fall, daß man das Theme weitergeben möchte. So hier nun der Code:
body {
animation: myanimation 10s infinite;
}
@keyframes myanimation
{
0% {background-color: #ff00004d;}
25%{background-color:#00ffff4d;}
50%{background-color: #00ff004d;}
75%{background-color: #3030304d;}
100% {background-color: #ff00004d;}
}Die 1. Zeile ist eigentlich der magische Teil, da gebe ich an, dass die Animation im "body" der Seite stattfinden soll, wie lange ein Durchlauf dauert (10S) und dass er unendlich (infinite) läuft und benenne meine Animation "myanimation"
Die Zeilen 6-10 definieren die Art der Animation. In diesem Beispiel habe ich 4 Übergänge definiert die jeweils 25% der gesamt Zeit dauern.
Von der Farbe in Zeile 6 auf die Farbe in Zeile 7 angegebene Farbe wird der Verlauf innerhalb von 2,5 S dargestellt Dann von der Farbe in Zeile 7 auf die Farbe in Zeile 8, dann von Zeile 8 auf Zeile 9, dann von Zeile 9 auf Zeile 10 und von da aus auf den farbwert in Zeile 6
Das ist ein Durchlauf, da wir die Animation unendlich laufen lassen, wiederholt sich der Vorgang.
Das ist sehr simpel und schont Ressourcen, es wird kein Video im Hintergrund genutzt.
Wie der Effekt mit eurem Bild aussieht, müsst ihr ausprobieren. Die Farbwerte sind mit Transparenzwert, d.h. es werden keine Knalligen Farben dargestellt sondern die Vollfarbe mit einem Transparenzwert.
- ff00004d die 4d ist der Transparenzwert in hexadezimaler Schreibweise.
Hier bein Beispiel bei jsfidle, an dem ihr etwas herumprobieren könnt: JSfilde Mit dem dunklen Theme von jsfidle sieht es etwas merkwürdig aus, wählt rechts in der Ecke die "Settings" und schaltet das dunkle theme aus, dann sieht es schon viel besser aus.
