Fallblattanzeigen kennt man von Flughäfen und Bahnhöfen. Heute wollen wir eine solche anzeige für eine Webseite nachbauen.
Um eine animierte Fallblattanzeige auf einer Webseite zu realisieren, bereiten wir zuerst die eigentliche Animation vor. Aus der Länge der Animation und der Anzahl der Bilder pro Sekunde ergibt sich die Gesamtzahl der Bilder pro Animation. In diesem Beispiel besteht unsere Animation aus sieben Bildern. Um nicht jedes Bild einzeln vom Server laden zu müssen, packen wir alle Bilder in ein einziges Bild, in ein sogenanntes Image-Sprite. Ob wir die Bilder alle nebeneinander, untereinander packen oder sie in einer Matrix anordnen ist dabei egal. In diesem Beispiel hab ich sie in einer einzigen Spalte angeordnet.
Nun kommen wir zur eigentlichen Anzeige. Der HTML-Code den wir dafür brauchen ist sehr einfach gehalten.
[code language=”html”]
<ul>
<li id="d0"></li>
<li id="d1"></li>
<li id="d2"></li>
<li id="d3"></li>
<li id="d4"></li>
</ul>
[/code]
Unser Sprite wird als Hintergrundbild der einzelnen <li>-Elemente eingebunden. Damit diese nicht untereinander sondern nebeneinander und in der richtigen Größe angezeigt werden, brauchen wir noch ein paar Zeilen CSS:
[code lang=”css”]
.display li {
background-image: url("simple-countup-sprite.png");
background-position: 0 0;
width: 90px;
height: 122px;
list-style: none;
float: left;
margin: 0;
padding: 0;
}
[/code]
Der oben stehenden Code reicht schon für eine einfache statische Anzeige. In dem wir den einzelnen <li>-Elementen mittels dem “style”-Attribut die Position des Hintergrundbildes vorgeben, kann auch bei Browsern die kein Javascript unterstützen ein bestimmter unveränderlicher Wert angezeigt werden. Um jedoch eine animierte Anzeige zu erhalten brauchen wir noch etwas Javascript Unterstützung. Um komfortabel auf die css-Eigenschaften zuzugreifen, binden wir jQuery ein.
[code lang=”javascript”]
window.setInterval("count()", 1000); // Counter Interval 1 Second
var oldState = new Array(0,0,0,0,0);
var newState = new Array(0,0,0,0,0);
var frame = 0;
var aniInterval = null;
var counter = 12343; // Start Value
var height = 122;
function count() {
counter++;
if(counter>99999) {
counter=0;
}
setDisplay(counter);
}
function animate() {
var digit;
for(var i=0; i<5; i++) {
if(oldState[i]!=newState[i]) {
digit = newState[i];
if(digit==0){
digit = 10;
}
if(frame>5) {
oldState[i] = newState[i];
}
pos = (1+frame+(digit-1)*7)*height;
$("#d"+i).css("background-position","0 -"+pos+"px");
}
}
frame++;
if(frame>6) {
frame = 0;
clearInterval(aniInterval);
aniInterval = null;
}
}
[/code]
Diese Anzeige hat noch einige Schwächen. So kann sie nicht schneller zählen als die Dauer der Animation. Es ist also noch viel Potential für Verbesserungen da.