Responsive Background animiert

Responsive Design: Interessante, animierte Hintergründe für Websites

Vorgeschichte

Gestern habe ich beschrieben, wie man gut skalierbare, schmale Hintergründe nach einer Technik von Robin erstellt. Heute möchte ich kurz darauf eingehen, wie man diese Hintergründe animieren kann, um einen noch interessanteren Effekt zu erzielen.

Hinweis

Die Demo ist bis jetzt nur im Chrome lauffähig. Er lief auch einmalig im Firefox 22, allerdings wirklich nur einmalig und dann niewieder.

Ein weiteres Hintergrundbild muss her

Damit man Bilder gegeneinander wechseln kann, benötigt man natürlich eine weitere Aufnahme für den Hintergrund. Diese sollte von der ursprünglichen Aufnahme nicht zu stark abweichen, immerhin ist der Hintergrund der Hintergrund und soll die Aufmerksamkeit nicht zu stark beeinflussen. Hierbei dient mir wieder eine Aufnahme von Maik.

Maik, andere Perspektive

Maik, andere Perspektive

Welches dann, nach der Technik von gestern, das folgendes Ergebnis liefert.

Responsive Background

Responsive Background

Codeanpassungen

Damit eine Animation überhaupt möglich ist, musste ich mich der CSS3-Animationen bedienen und Keyframes erzeugen. Der Code dafür lautet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
	background-color:rgb(220,220,220);
	background-image:url(../../media/ResponsiveBackground.jpg);
	background-size: 100% 100%;
	background-position: fixed;
	-moz-animation:demo 10s infinite; /* Firefox */
	-webkit-animation:demo 10s infinite; /* Safari and Chrome */
	-o-animation:demo 10s infinite; /* Opera */
	animation:demo 10s infinite;
}
 
@keyframes demo{
	0% {background-image:url(../../media/ResponsiveBackground.jpg);}
	50% {background-image:url(../../media/ResponsiveBackground_fade.jpg);}
	100% {background-image:url(../../media/ResponsiveBackground.jpg);}
}
 
/* Firefox */
@-moz-keyframes demo{
	0% {background-image:url(../../media/ResponsiveBackground.jpg);}
	50% {background-image:url(../../media/ResponsiveBackground_fade.jpg);}
	100% {background-image:url(../../media/ResponsiveBackground.jpg);}
}
 
/* Safari and Chrome */
@-webkit-keyframes demo{
	0% {background-image:url(../../media/ResponsiveBackground.jpg);}
	50% {background-image:url(../../media/ResponsiveBackground_fade.jpg);}
	100% {background-image:url(../../media/ResponsiveBackground.jpg);}
}
 
/* Opera */
@-o-keyframes demo{
	0% {background-image:url(../../media/ResponsiveBackground.jpg);}
	50% {background-image:url(../../media/ResponsiveBackground_fade.jpg);}
	100% {background-image:url(../../media/ResponsiveBackground.jpg);}
}

Fazit

Mit der vorgestellten Erweiterung der Technik lassen sich interessante Effekte erzielen, mit denen man dem schnöden Hintergrund etwas mehr Dynamik verleihen kann. Allerdings sollte der Effekt nicht überstrapaziert werden, denn es handelt sich nach wie vor um den Hintergrund. Die Arbeitsdateien gibt es wie gewohnt hier zum Download 1.

1 Dieses Werk bzw. Inhalt steht unter einer Creative Commons Namensnennung 3.0 Unported Lizenz.

Posted in Blog and tagged , , .

Sven Bischoff

Sven Bischoff, Jahrgang 1990, hat an der Hochschule Harz in Wernigerode Medieninformatik studiert und mit seiner Arbeit "Die fragile Präsenz des Autors in der Fotografie" als Bachelor of Science abgeschlossen. Er arbeitet zur Zeit als Softwareentwickler im Bereich Web-Frontend bei der ab-in-den-urlaub.de Betriebsgesellschaft mbH in Leipzig.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.