Ist dir mein Weihnachtsgruß oben links schon aufgefallen? Nett von mir, oder? Und das sogar multilingual.

Willst du wissen wie das funktioniert und hast du Lust das Banner nachzubauen? Prima, dann mal los.

Das Zauberwort heißt keyframe-Animationen. Diese waren bis vor kurzem noch Webkit-Browsern und Mozilla Firefox vorbehalten, mit den neuesten Browser-Versionen hat nun aber auch Microsoft und Opera nachgezogen. Somit steht dem Einsatz von selbstablaufenden Animationen nichts mehr im Wege.

Beginnen wir mit der HTML-Struktur. Wir benötigen insgesamt vier Container, welche wir wie folgt anlegen:

div id="banner">

	<div class="inhalt">

		<div class="text_deutsch">Frohe Weihnachten</div>
		<div class="text_englisch">Merry Christmas</div>

	</div><!--.inhalt-->

</div><!--#banner-->

Das Banner soll oben links auf der Seite positioniert werden und beim scrollen auch mitwandern. Als Hintergrund bekommt das Banner einen roten Farbverlauf. Dazu kommt noch eine rote Rahmenlinie sowie ein Schlagschatten. Gleichzeitig legen wir noch die Innenabstände fest:

#banner {
	position: fixed;
	padding: 10px 120px;
	background: #a90329;
	background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));
	background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
	background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
	background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%);
	background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
	border: 3px solid red;
	-webkit-box-shadow: 0 0 5px #666;
	-moz-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
}

Damit wir den Text im Banner entsprechend positionieren können, haben wir einen weiteren Container für den Inhalt angelegt. Hier bestimmen wir Breite und Höhe und zentrieren den Text.

#banner .inhalt {
	position: relative;
	width: 100px;
	height: 35px;
	text-align: center;
}

Zwischenergebnis:

Die Container für die Grußtexte müssen wir absolut positionieren, damit die Texte übereinander und nicht untereinander angeordnet werden. Gleichzeitig werden wir die Schrift etwas aufpeppen. Als Schriftart habe ich den Google Webfont ‚Margarine‘ ausgesucht, den wir per @import einbinden. Passt irgendwie zu Weihnachten, oder?

@import url(http://fonts.googleapis.com/css?family=Margarine);

#banner .inhalt .text_deutsch,
#banner .inhalt .text_englisch {
	position: absolute;
	color: #fff;
	font-family: 'Margarine', cursive;
	font-weight: bold;
	font-size: 14px;
	line-height: 16px;
	text-shadow: 1px 1px 3px #333;
}

Das Banner sieht nun so aus:

Wir wollen das Banner oben links abgewinkelt anordnen. Dazu müssen wir es um minus 45 Grad (315 Grad geht natürlich auch) drehen und entsprechend positionieren. Wir ergänzen folgendes:

#banner {
	top: 30px;
	left: -120px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	z-index: 99999;
}

Damit das Banner an oberster Ebene angeordnet wird und nicht von anderen Elementen, beispielsweise einem Menü, überdeckt wird, haben wir noch einen hohen z-index definiert. Mit den top– und left-Positionen müsst ihr ein bisschen spielen und ausprobieren. Denkt aber immer daran, dass das Elemente gedreht ist und die Positionierung von einem nicht gedrehten Element ausgeht.

Nun fehlt uns nur noch die Animation des Grußtextes. Wer diesen Artikel verfolgt hat, weiß, dass keyframe-Animationen aus zwei Teilen bestehen. Zunächst wird die eigentliche Animation definiert, also das, was während der Animation passieren soll:

@keyframes text_deutsch {
	0% { opacity: 0; }
	5% { opacity: 1; }
	40% { opacity: 1; }
	45% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes text_englisch {
	0% { opacity: 0; }
	50% { opacity: 0; }
	55% { opacity: 1; }
	95% { opacity: 1; }
	100% { opacity: 0; }
}

Der zweite Part ist die Deklaration bei dem Element, auf das die Animation angewendet werden soll:

#banner .inhalt .text_deutsch {
	animation: text_deutsch 10s infinite;
}

#banner .inhalt .text_englisch {
	animation: text_englisch 10s infinite;
}

Was passiert hier nun genau? Wir haben zwei Animationen. Eine für den deutschen (text_deutsch) und eine für den englischen Grußtext (text_englisch). Beide Animationsphasen haben eine Länge von 10 Sekunden (10s). Mittels infinite werden die Animationen endlos wiederholt.

In der Animationsphase wird der deutsche Text innerhalb von 0 bis 45% von 10 Sekunden durch opacity eingeblendet und danach ausgeblendet. Der englische Text ist innerhalb von 0 bis 50% ausgeblendet und wird von 50 bis 95%, auf 10 Sekunden gesehen, eingeblendet und danach wieder ausgeblendet. Die Zwischenabstände, z.B. 40 bis 45%, sorgen dafür, dass die Texte langsam ein- und ausgeblendet werden. So entsteht ein schöner Fade-Effekt.

Was ihr oben seht, wird vermutlich mal der Standard-Aufruf sein, wenn die W3C das als Standard festgeschrieben hat. Bis dahin benötigt jedoch jeder Browser sein eigenes Präfix. Und das bedeutet Arbeit für uns. Damit die aktuellen Versionen der großen Browser das auch darstellen können, müssen wir die Syntax für jeden Browser erstellen. Ich hab das mal für euch gemacht:

@-webkit-keyframes text_deutsch {
	0% { opacity: 0; }
	5% { opacity: 1; }
	40% { opacity: 1; }
	45% { opacity: 0; }
	100% { opacity: 0; }
}

@-webkit-keyframes text_englisch {
	0% { opacity: 0; }
	50% { opacity: 0; }
	55% { opacity: 1; }
	95% { opacity: 1; }
	100% { opacity: 0; }
}

@-moz-keyframes text_deutsch {
	0% { opacity: 0; }
	5% { opacity: 1; }
	40% { opacity: 1; }
	45% { opacity: 0; }
	100% { opacity: 0; }
}

@-moz-keyframes text_englisch {
	0% { opacity: 0; }
	50% { opacity: 0; }
	55% { opacity: 1; }
	95% { opacity: 1; }
	100% { opacity: 0; }
}

@-ms-keyframes text_deutsch {
	0% { opacity: 0; }
	5% { opacity: 1; }
	40% { opacity: 1; }
	45% { opacity: 0; }
	100% { opacity: 0; }
}

@-ms-keyframes text_englisch {
	0% { opacity: 0; }
	50% { opacity: 0; }
	55% { opacity: 1; }
	95% { opacity: 1; }
	100% { opacity: 0; }
}

@-o-keyframes text_deutsch {
	0% { opacity: 0; }
	5% { opacity: 1; }
	40% { opacity: 1; }
	45% { opacity: 0; }
	100% { opacity: 0; }
}

@-o-keyframes text_englisch {
	0% { opacity: 0; }
	50% { opacity: 0; }
	55% { opacity: 1; }
	95% { opacity: 1; }
	100% { opacity: 0; }
}

Bei den Text-Containern müssen wir die Animation ebenfalls mit den Browser-Präfixen einbinden:

#banner .inhalt .text_deutsch {
	-webkit-animation: text_deutsch 10s infinite;
	-moz-animation: text_deutsch 10s infinite;
	-o-animation: text_deutsch 10s infinite;
	-ms-animation: text_deutsch 10s infinite;
}

#banner .inhalt .text_englisch {
	-webkit-animation: text_englisch 10s infinite;
	-moz-animation: text_englisch 10s infinite;
	-o-animation: text_englisch 10s infinite;
	-ms-animation: text_englisch 10s infinite;
}

Als letzten Schritt wollen wir noch für etwas Kompatibilität mit älteren Browsern sorgen, die keine keyframe-Animationen unterstützen. Bei diesen Browsern würden die beiden Texte übereinander dargestellt. Um das zu vermeiden, setzen wir die Sichtbarkeit des englischen Textes auf null, während der deutsche Text volle Sichtbarkeit bekommt. Dadurch ist bei älteren Browsern nur der deutsche Text sichtbar.

#banner .inhalt .text_deutsch {
	opacity: 1;
}

#banner .inhalt .text_englisch {
	opacity: 0;
}

So, das war’s. Solltet ihr diesen Artikel erst nach Weihnachten 2012 lesen, so könnt ihr das Banner trotzdem in Aktion sehen:

Und wer keine Lust zum mitmachen hatte, für den habe ich hier das Banner zum Download zur freien Verfügung: