Webdev: Webkit Transition Beispiel

Ich wollte für eine kleine Web-Anwendung die ich gerade schreibe einen Effekt nutzen, den ich auf der Seite von The Wonderfactory gesehen habe. Dort kann man auf der Seite die Schlagzeilen durchblättern, was vermutlich mit der selben Technik umgesetzt wurde, die die auch für die HTML-5 Ausgabe der Sports-Illustrated genutzt haben.
Ich bin nicht so ein Freund von aufgeblähten JavaScript-Bibliotheken (zu aufgebläht für meine Seite) und diesen setTimeout-Pfusch den man nutzt, um etwas Bewegung in eine Seite zu bringen. Deshalb und weil die Seite die ich gerade schreibe wohl hauptsächlich von Webkit-Browsern angesteuert werden dürfte, habe ich mir so eine Wisch-Effekt-Box mit dem ein bissle JavaScript und etwas mehr CSS zusammengebaut. Unterm Strich können diese Webkit-Transition-Effekte einiges an JavaScript-Code überflüssig machen und die Seite läuft damit auch problemlos auf dem iPhone =)
Und die Animation soll angeblich auch von der Hardware beschleunigt werden.
Link zur Demo Seite

Leave a Reply