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

Interessanter Fakt
Wissen Sie, warum ein Polaroid unten einen größeren Rand aufweist? In diesem
Bereich sind die Chemikalien eingefasst, die das Bild entwickeln.
Als Letztes gestalten Sie den footer . Sie möchten, dass der Button immer zentral am
unteren Bildrand erscheint. Folgender CSS-Code realisiert dies:
footer {
position: absolute;
left: 0; right: 0;
bottom: 0;
}
Damit sind alle CSS-Vorbereitungen getroffen.
6.3.4 Das Laden eines Polaroids
Kurzes Resümee an dieser Stelle: Sie haben erfolgreich eine Funktion neuespo-
laroid() angelegt, die ein Bild aus Flickr lädt und als Hintergrundbild des Containers
flickr-bild festlegt. Des Weiteren haben Sie alle nötigen CSS-Definitionen vorge-
nommen. Nun rufen Sie die Funktion neuespolaroid() über den Button auf. Mit fol-
gendem Code, den Sie unterhalb Ihrer Funktion neuespolaroid() einsetzen, wird die
Funktion bei einem Klick auf den Button ausgeführt:
// Eventhandler: Button
$('button').on('click', function(){
neuespolaroid();
});
Damit nun das Bild eingeblendet wird, müssen Sie den EventHandler Shake anpas-
sen, den Sie zu Anfang des Kapitels angelegt hatten:
// Eventhandler: Shake
var onShake = function() {
// CSS-Klasse austauschen und Bild einblenden
$('.flickr-bild').toggleClass('sichtbar');
};
Sie ergänzen den Container flickr-bild durch die CSS-Klasse sichtbar . Damit blen-
det sich das Bild, nach einer Schüttelgeste, langsam ein. Die Animation haben Sie
bereits via CSS und -webkit-transition konfiguriert.