Page-Flip-Aktionen für mobile Apps erstellen

Wir haben zwei div-Elemente, die die eigentlichen Seiteninhalte - im Beispiel zwei - darstellen. Diese beiden div-Elemente sind mit ids mit den passenden Namen vorne und hinten versehen. Außerdem haben diese div-Elemente die Klasse normal beziehungsweise flipped, die steuert,welche der beiden Seiten zu sehen ist. Schließlich gibt es noch in jedem div-Seitenelement einen Link, der den Wechsel zwischen den Seiten auslöst. Ziel ist, dass diese beiden Seiten wechselnd angezeigt werden und dass der Wechsel animiert - gedreht - erfolgt.

Jetzt zum CSS-Code: Zuerst einmal werden beide div-Elemente übereinander platziert und auf eine Höhe und Breite von 100 Prozent festgelegt. Außerdem werden ein paar Vorbereitungen für den Flip-Effekt getroffen: Die Rückseite soll nicht zu sehen sein (backface-visiblity: hidden); damit außerdem der Übergang wahrnehmbar ist, wird transition definiert. Im folgenden Beispiel sehen Sie  nur die Variante mit der Standardeigenschaft - die transition- und transform-Eigenschaften müssen Sie selbstverständlich wiederum mit den herstellerspezifischen Präfixen schreiben:

Im Normalzustand sollen die Elemente nicht gedreht sein:

Durch diese Formatierungen ist jetzt erst einmal nur die erste Seite, das heißt der div-Container mit id="vorne" zu sehen; der andere ist verborgen. Dann kommt die Klasse flipped dazu, die für den  gedrehten Zustand verantwortlich ist:

Per Javascript wird durch Klicken auf die Links bei den div-Containern immer wechselnd die Klasse flipped hinzugefügt und entfernt - sehr einfach geht das mit dem jQuery-Befehl  toggleClass(); hierfür muss natürlich jQuery im Kopfbereich eingebunden sein.

Das war es schon: Jetzt ist jeweils nur eine der beiden Seiten zu sehen, die andere wird in animierter Form durch einen Klick auf die Links eingeblendet. Natürlich stellt dieses Beispiel nur eine einfache Basis dar. So fehlt derzeit noch die Fallback- Lösung, sofern 3D-Transformationen nicht unterstützt werden. Hierbei könnte man sich von jQuery Mobile inspirieren lassen: Wenn 3D-Transformationen für die Seitenübergänge nicht unterstützt werden, wird einfach ein  Überblenden mithilfe einer Veränderung der Eigenschaft opacity - also fade - eingesetzt.

Gestatten: DeviceOrientation

Eine interessante Kombination sind 3DTransformationen zusammen mit den DeviceOrientation-Events. Die Device-Orientation Event Specification stammt aus der Feder des W3C und definiert neue Javascript-Events, mit denen sich die Lage von Geräten ablesen lässt: Sie  können darüber auslesen, wie ein Gerät gerade gehalten wird, reagieren, wenn es gedreht oder gekippt wird -  egal in welche Richtung. Die neue Spezifikation ist relativ jung, aber erfreut sich wachsender Unterstützung. Diese Events auszulesen, empfiehlt sich natürlich sinnvollerweise bei mobilen Geräten, die die entsprechende Hardwareausstattung - nämlich Lagesensoren - mitbringen.  Bisher funktionieren die DeviceOrientation-Events im iOS ab 4, im Opera Mobile ab 12, im Android-internen Browser ab 4 und im mobilen Firefox. In der Spezifikation sind zwei Events definiert:

• deviceorientation ermöglicht es zu ermitteln, wie das Gerät zur Erde positioniert ist.
• devicemotion bietet ein Ablesen von Beschleunigung und Drehung, ermittelt also, wie das Gerät im Verhältnis zur Erde bewegt wird.

Wenn Sie diese Events abfangen, können Sie über alpha, beta und gamma die aktuelle Position des Geräts auslesen.

• alpha beinhaltet eine Gradangabe relativ zu Norden. Da der Wert gegen den Uhrzeigersinn angegeben ist, müssen Sie 360 - alpha nehmen, um einen typischeren Wert zu erhalten.
• beta bestimmt die vertikale Drehung. Wenn das Gerät auf dem Boden liegt, ist der Wert 0,  wenn es senkrecht aufgerichtet ist, 90.
• Mit gamma ermitteln Sie die seitliche Drehung.

Die ausgelesenen Werte können Sie beispielsweise einsetzen, um ein Element entsprechend mit  CSS3-3D-Transformationen zu drehen.

DeviceOrientation und CSS3D

Im Beispiel soll ein einfaches Viereck gemäß den Bewegungen des Geräts gedreht werden. Zuerst wird ein Event Listener für das deviceorientation-Event registriert - diesmal ganz ohne  Zuhilfenahme von jQuery. Hierfür wird addEventListener benutzt. Die Funktion, die aufgerufen werden soll, heißt handleOrientation:

In der Funktion werden die alpha-, beta- und gamma-Werte ausgelesen:

Dann wird auf das Element zugegriffen, das gedreht werden soll; im Beispiel ist es ein Element mit id="viereck".

Bei diesem wird nun über die style-Eigenschaft die 3D-Transformation ausgelöst.

Das war die für den Firefox benötigte Angabe. Beachten Sie, dass die herstellerspezifischen Präfixe bei der Verwendung in Javascript ohne Trennstriche geschrieben werden müssen. Es folgen die Angaben für Webkit-Browser ...

... für den Internet Explorer

... und für Opera

Bei der Schreibung der herstellerspezifischen Präfixe in Javascript gibt es Unterschiede in der Groß- und Kleinschreibung, so heißt es MozTransform, WebkitTransform und OTransform, aber  msTransform- für den Internet Explorer wird der erste Buchstabe also nicht  großgeschrieben. Eine weitere Möglichkeit wäre natürlich, mit der 3D-Transformation die  Bewegung des Geräts jeweils auszugleichen.

Dieses Reagieren auf die Bewegung des Geräts  lässt sich natürlich gut für Spiele einsetzen - oder zum Navigieren. Letzteres zeigt die aktuelle  Beercamp-Seite: Diese präsentiert sich als ein 3D-Pop-up- Buch. In Desktop-Browsern kann  man per Mausklick/Ziehen durch die Seiten blättern. Auf mobilen Geräten, die die DeviceOrientation-Events unterstützen, funktioniert dies durch ein Bewegen des Geräts. Die  Beercamp-Seite demonstriert damit, was derzeit (fast) schon möglich ist - für einen breiten  Einsatz wird man noch etwas warten müssen, denn richtig rund läuft die Beercamp-Seite nur auf Chrome/Safari oder neueren iPhones.

Dass 3D-Transformationen in größerem Maße heute  schon angekommen sind, demonstriert jQuery Mobile: Alle Seitenübergänge setzen auf  3D-Transformationen - und wenn die Browser das noch nicht können, erhalten sie eine  einfachere Fade-Animation.