Blog

Was wir schon immer sagen wollten

Blog

Zeit-Animation auf Webseiten

posted on

Für unseren lokalen Handballverein musste ich eine kleine Anwendung schreiben, welche alle paar Minuten ein Horn ertönen lässt. Dies wurde für das jährliche Handball Grümpelturnier in Einsiedeln eingesetzt - die Spiele dauern dabei immer gleich lange und unabhängig vom aktuellen Spielstatus ertönt das Horn alle 10 Minuten. 

Mittels Javascript ist es ein leichtes einen Countdown laufen zu lassen und nach Ablauf einer bestimmten Zeit eine Aktion auszuführen (z.B. mittels setTimeout) - jedoch kam schon bald der Wunsch auf die aktuelle Zeit auch visuell ansprechend darzustellen. Auf der Suche nach einer Lösung bin ich auf das Framework flipclock.js gestossen. Mit dieser Bibliothek ist es einfach möglich eine animierte digitale Uhr auf einer Webseite darzustellen. Beim Wechsel der einzelnen Zahlen für die Zeitdarstellung werden diese sehr schön animiert. Zusätzlich bietet die Bibliothek auch die Möglichkeit den Countdown an sich darüber zu steuern. So war dann schlussendlich sehr wenig Code nötig um die gewünschte Anforderung umzusetzen:

 

Ein Problem welches dann doch noch auftauchte war, dass das Iphone (iOS) keinen Sound ab einer Webseite abspielt. Denn nach Ablauf des Countdowns ertönt ein Horn, welches dann über die Lautsprecher-Anlage ausgegeben wird. Unser pragamtischer Ansatz war dann einfach, dass anstatt einem Iphone der Laptop genutzt wurde. Anscheinend gäbe es eine Lösung um das Sound-Problem auf iOS zu umgehen

| Categories: Web Technologien, Frameworks

Post a Comment

Stichwort-Liste