5202

ein Blog über technische Fragen zu Blogger

Animierter Banner ohne Javascript

von
Eine liebe Leserin möchte einen animierten Banner für ein Gewinnspiel - was mit ganz viel Blink-Blink. Und es soll auch für den normalen Blogger nachbaubar sein - also anders, wie meine üblichen Skizzen :=).

Message arrived - heute mal ein Tutorial!

Keyframe

Ihr könnt selbstablaufende, bewegte Animationen mit einer sehr mächtigen CSS3-Eigenschaft bauen, nämlich @keyframes. Inzwischen unterstützen alle Browser diese Eigenschaft, sogar der IE ab Version 9+

Okay, Besucher mit Asbach Uralt Browsern werden euren Banner nicht sehen - aber ich denke, ihr könnt die Eigenschaft trotzdem bedenkenlos einsetzen; das ist ist ja keine funktionale Geschichte, sondern reines Dekor.

Einstieg: HTML

Fangen wir mit dem HTML an.

Macht euch zunächst mal klar, das in der Skizze drei Banner übereinander liegen. Nennen wir sie Banner1, Banner2 und Banner3.

Diese drei Banner sind drei Div-Container, die in einem weiteren Div-Container liegen, dem holder. Der holder ist der 'Rahmen', der alles zusammenhält.
<div class="holder">
 <div class="box eins">Super-tolles Gewinnspiel!!
  </div>
 <div class="box zwei">Hier auf meinem Blog!!!
  </div>
 <div class="box drei">Nur bis 31.12.2099 einself!!!
  </div>
</div>
Das ist an HTML alles. Ihr könntet beliebig viele 'Banner' = Div-Container definieren, dazu gleich mehr.

CSS: Grundlage

Der 'Rahmen' für die Banner wird relativ positioniert und bekommt eine Breite von 900px:
.holder {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 900px
}
Mit margin: 0 auto wird der Rahmen mittig platziert.

Jeder der drei 'Bannern' ist 900px breit, und 100px hoch - genau gleich wie der 'Rahmen'.

Ein alter Trick, um den Text horizontal zu zentrieren - gebt eine line-height, die genauso hoch ist, wie die Höhe des Elements. Mit text-align: center zentriert ihr den Banner vertikal.

Zum Schluss werden mit position: absolute alle drei Banner übereinander gelegt.
.box {
 position: absolute;
 top: 0;
 left: 0;
 display: block;
 width: 900px;
 height: 100px;
 line-height: 100px;
 text-align: center;
 font-size: 40px
}
Jeder 'Banner' bekommt noch einen eigenen Hintergrund mit rgba-Farbe:
.eins {
background: rgba(255, 222, 0, .5)
}
.zwei{
background: rgba(255, 133, 0, .5)
}
.drei{
background: rgba(22, 46, 174, .5)
}
Im Grunde war's das schon ... in der Demo habe ich noch ein paar Deko-Sachen zusätzlich gemacht, aber das findet ihr im Download.

CSS3 Eigenschaft: @keyframes

Bis hierher war's 'klassisches' CSS, jetzt wird's spanend - kommen wir zu den Keyframes.

Grundsätzlich: Ein Keyframe ist eine Funktion mit der ihr ein HTML-Element innerhalb eines Zeitablauf verändern könnt.

Wichtig - schaut euch noch mal die Demo an:

Jeder der drei Banner wird im Ablauf der Animation verändert .. Banner1 ist da, Banner2 und Banner3 nicht, dann verschwindet Banner1 und Banner2 taucht auf und so weiter ...

Jeder der drei Banner besitzt also eine eigene Funktion - damit das später exakt zuordenbar wird, braucht ihr für jede Keyframe zunächst mal einen Namen, nennen wir die in unserer üblichen, super-kreativen Art "fadebox1", "fadebox2", "fadebox3":
@keyframes fadebox1 {
//Hier werden die Animationen notiert
}
@keyframes fadebox2 {
//Hier werden die Animationen notiert
}
@keyframes fadebox3 {
//Hier werden die Animationen notiert
}
Für jede dieser Keyframes definieren wird nun einen zeitlich Ablauf und zwar in Prozent - der 'reale' Zeitrahme, d.h. wie lang das in Wirklichkeit dauert, legen wir später in der Animation fest.
@keyframes fadebox1 {
0% {// Die zu animierende Eigenschaft}
30% {// Die zu animierende Eigenschaft}
35% {// Die zu animierende Eigenschaft}
90% {// Die zu animierende Eigenschaft}
100% {// Die zu animierende Eigenschaft}
}
@keyframes fadebox2 {
0% {// Die zu animierende Eigenschaft}
30% {// Die zu animierende Eigenschaft}
35% {// Die zu animierende Eigenschaft}
90% {// Die zu animierende Eigenschaft}
100% {// Die zu animierende Eigenschaft}
}
@keyframes fadebox3 {
0% {// Die zu animierende Eigenschaft}
30% {// Die zu animierende Eigenschaft}
35% {// Die zu animierende Eigenschaft}
90% {// Die zu animierende Eigenschaft}
100% {// Die zu animierende Eigenschaft}
}
Jetzt denken wir mal nach und fragen uns, _was_ wir da eigentlich animieren wollen ... schaut euch noch mal in der Demo den ersten Banner an.

Banner1 ist 3 Zeiteinheiten zu sehen, den Rest über wird er ausgeblendet. Das sehen und ausblenden machen wir mit opacity: 1 und opacity: 0
@keyframes fadebox1 {
0% { opacity: 1 }
30% { opacity: 1 }
35% { opacity: 0 }
95% { opacity: 0; }
100% { opacity: 1; }
}
Die Animation startet bei der Zeiteinheit "0" und Banner1 ist bis zur Zeiteinheit "3" voll zu sehen ... bis "3.5" wird er langsam ausgeblendet, ist dann bis "9.5" ganz weg, um bei zu "10" wieder eingeblendet zu werden.

Beim 'Banner2' - dem mittleren Banner - ist noch einfacher: Er ist bis "3" und nach "6" ausgeblendet.
@keyframes fadebox2 {
0% { opacity: 0 }
30% { opacity: 0 }
35% { opacity: 1; }
60% { opacity: 1; }
65% { opacity: 0; }
100% { opacity: 0; }
}
Banner3 ist der komplizierteste, weil er eine zusätzlich Animation hat - dafür definieren wir als erstes Zwischenschritte:
@keyframes fadebox3 {
0% { opacity: 0 }
60% { opacity: 0 }
65% { opacity: 1 }
70% { opacity: 1 }
75% { opacity: 1 }
80% { opacity: 1 }
85% { opacity: 1 }
90% { opacity: 1 }
100% { opacity: 0 }
}
Die Zwischenschritte allein bewirken noch gar nichts - als nächsten sagen wir der Funktion _was_ dort passieren soll, nämlich größer und kleiner werden. Dazu benützen wir die scale Eigenschaft:
@keyframes fadebox3 {
0% { opacity: 0 }
60% { opacity: 0 }
65% { opacity: 1; transform: scale(1)  }
70% { opacity: 1; transform: scale(2.5) }
75% { opacity: 1; transform: scale(.5) }
80% { opacity: 1; transform: scale(2.5) }
85% { opacity: 1; transform: scale(0.7) }
90% { opacity: 1; transform: scale(1) }
100% { opacity: 0; }
}
scale(1) skaliert gar nicht, das ist der Ausgangszustand ... scale(2.5> macht den Banner 2,5x größer ... scale(.7) 0,7x kleiner und so weiter.

Ihr könnt natürlich die Werte verändern oder auch weiter Funktionen für weitere Banner definieren - eurer Phantasie ist keine Grenze gesetzt :=).
Animation
Die Keyframe-Funktion ist geschrieben, jetzt müssen wir nur noch die Animation selber starten und das geht mit der ... wie wird die Eigenschaft wohl heißen? ... animation Eigenschaft.

Noch mal zurück - jeder Banner hat eine eigene Funktion (Keyframe), also müssen wir die jetzt auch für jeden Banner einzeln starten:
.eins {
        animation: fadebox1 10s infinite
}
.zwei {
        animation: fadebox2 10s infinite
}
.drei{
        animation: fadebox3 10s infinite
}

Ich habe hier die Kurzschreibweise verwendet und das meint im Klartext, dass die Animation 10 Sekunden dauern soll und sich unendlich (infinite) fortsetzen soll ... weitere Eigenschaften wären möglich, aber ich hab's erst mal einfach halten wollen.

Fertig ... oder doch nicht?

Jetzt verrat ich euch den Hacken an der Sache - kein Browser unterstützt die @keykframes Eigenschaft direkt, sonder nur mit Vendor Prefix.

Für Gecko(Firefox) braucht es den Präfix -moz-, für Webkit(Chrome, Safari) -webkit- und so weiter ... das ist also 'ne Menge zusätzlicher Schreibarbeit. Im Download findet ihr alle Vendor-Präfixe für alle Browser - benützt sie!

Aussicht

@keykframes ist eine unglaublich mächtige Eigenschaft, mit der ihr wunderbare Geschichten auf eurem Blog erzählen, super-simpel eine Bildergalerie zeigen oder eure Besucher super-schwer nerven könnt

--> Eure Entscheidung.

Alles was sich bewegt, ist nervig! That's the point. Ihr müsst euch also bewusst entscheiden, was ihr animiert wollt oder wo weniger mehr ist. Einmal für kurze Zeit so ein animierten Banner zu verwenden ist sicher okay, zehn Banner auf dem Blog, ist overkill.

Anmerkungen

Wenn's Probleme gibt - Fragen ist oft hilfreich! Wenn's keine Probleme gibt, dürft ihr natürlich das auch sehr gerne erwähnen :=)