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

Herzlichen Glückwunsch, Sie haben Ihre erste Schüttelgesten-WebApp gebaut. Im
Moment ist die WebApp allerdings recht limitiert. Sie müssen die Seite immer aktua-
lisieren, wenn Sie ein neues Polaroid laden wollen. Schöner wäre es doch, wenn durch
erneutes Drücken des Buttons das alte Polaroid aus dem Bildschirm flöge und ein
neues eingeblendet würde. Dafür müssen Sie den Code an einigen Stellen erweitern.
Also, weiter geht's!

6

Altes Polaroid weg, neues Polaroid her

Um die WebApp so zu erweitern, dass auf Knopfdruck das alte Polaroid aus dem Bild-
schirm fliegt und ein neues eingeblendet wird, werden Sie:

1. die CSS-Eigenschaften ergänzen
2. eine neue Funktion polaroidweg() anlegen, die das alte Polaroid aus dem Bild flie-
gen lässt
3. die Funktion des Buttons so anpassen, dass bei Drücken des Buttons und unter
bestimmten Umständen die Funktion polaroidweg() ausgeführt wird
4. das Shake-Event erweitern, so dass nur in bestimmten Fällen das Flickr -Bild einge-
blendet wird

5. die Funktion neuespolaroid() erweitern

1. Die CSS-Eigenschaften erweitern
Für die Animation des Polaroids verwenden Sie die CSS-Eigenschaft -webkit-transi-
tion . Dabei weisen Sie der CSS-Klasse polaroid-rahmen zunächst einen negativen obe-
ren Abstand ( margin ) von -800 zu. Dadurch verschwindet das Polaroid aus dem
Sichtfeld des Benutzers:

.polaroid-rahmen {
border: 15px solid #fff;
border-bottom-width: 60px;
background-color:#efefef;
width:240px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.2);

/*Neu hinzugekommen:*/
-webkit-transition: all 1s ease-in-out;
margin: -800px auto;
}

Listing 6.10 Vorbereitung für die Animation des Polaroids via CSS

Die CSS-Klasse sichtbar , die Sie später per jQuery zum Container polaroid-rahmen
hinzufügen, setzt den oberen Abstand auf 0 Pixel zurück: