Auslesen des Bewegungssensors mit JavaScript - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 261

// geschuettelt wieder auf unwahr setzen
geschuettelt = false;

Das war's! Damit können Sie so viele Polaroids nacheinander einblenden lassen, wie
sie möchten. Sie können sich gerne an dieser Stelle schon zufriedengeben oder aber
im folgenden Abschnitt der WebApp durch kleine Details noch das Sahnehäubchen
aufsetzen.

6

6.3.5 Das Sahnehäubchen - eine leichte Rotation des Polaroids

Wir haben doch gewusst, dass Sie weitermachen und sich mit nichts weniger als dem
Besten zufriedengeben. Das ist der richtige Geist! Wäre es nicht schön, wenn das
Polaroid mit einer leichten Drehung herein- und herausfliegen würde? Und wäre es
nicht schön, wenn die Stärke der Drehung auch noch per Zufall festgelegt wäre? Jaja,
wenn man einmal anfängt … Zum Glück ist es nicht viel Arbeit, diese feinen Details
hinzuzufügen. Zuerst erweitern Sie die Funktion polaroidweg() direkt nach dem Hin-
zufügen der CSS-Klasse des Containers flickr-bild , um diese Zeile:

$('.polaroid-rahmen').css("-webkit-transform", "rotate(" +
(Math.floor(Math.random() * 180)-90) + "deg)");

Sie weisen hier dem Container polaroid-rahmen eine neue CSS-Eigenschaft -webkit-
transform zu. Als Wert geben Sie rotate an. Den Inhalt dieses rotate -Wertes, der die
Rotation des Elements in Grad angibt, errechnen Sie durch eine Zufallszahl. Damit sich
der Container polaroid-rahmen nicht immer nur zu einer Seite dreht, ziehen Sie den
Wert 90 von dem Zufallszahlenbereich bis 180 ab. Damit könnte theoretisch, sollte die
Zufallszahl z.B. 45 betragen, die letztendliche Rotation, durch die Minimierung um den
Wert 90, -45 betragen. Der mögliche Wertebereich liegt somit bei - 90 bis +90. Damit
der Browser die Zahl korrekt interpretieren kann, müssen Sie noch die Bezeichnung
deg sowie eine geschlossene Klammer anführen. Würden Sie keine Zufallszahl verwen-
den und die Rotation nur im CSS angeben, dann sähe sie z. B. folgendermaßen aus:

-webkit-transfom: rotate(45deg);

Mit dieser Zuweisung haben Sie die Rotation gestaltet, die das Polaroid annimmt,
wenn es aus dem Bild fliegt. Zusätzlich möchten Sie jedoch, dass das Polaroid,
welches sichtbar stehen bleibt, ebenfalls etwas links oder rechts geneigt ist. Dafür
implementieren Sie fast dieselbe Zeile einfach an den Anfang der Funktion neues-
polaroid() :

$('.polaroid-rahmen').css("-webkit-transform", "rotate(" +
(Math.floor(Math.random() * 10)-5) + "deg)");