HTML5 als Designwerkzeug - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 179

Jetzt kommt der spannende Teil: Erweitern Sie den CSS-Code des Banners durch eine
Animation des oberen Randes:

.banner {
background-color:#0000ff;
color:#fff;
height:50px;
padding:10px;
margin-top:-70px;
-webkit-transition: margin-top 2s ease-in-out;
}

4

Die Eigenschaft -webkit-transition besteht aus insgesamt drei Teilen: Der erste Teil,
in diesem Fall margin-top , gibt die Eigenschaft an, die animiert werden soll. Dabei
können Sie eine bestimmte CSS-Eigenschaft angeben oder aber auch über die
Bezeichnung all alle Eigenschaften des Elements mit einbeziehen. Der zweite Teil
gibt die Dauer der Animation in Sekunden an. Sie können auch Dezimalzahlen ver-
wenden, müssen dann aber das Komma, aufgrund der englischen Sprachweise, zu
einem Punkt abändern. Eine halbe Sekunde definieren Sie z. B. als 0.5s . Der dritte Teil
beschreibt die Animationsart. Sie geben hier an, ob die Animation langsam starten
und enden ( ease-in-out ) oder vollkommen linear ( linear ) ablaufen soll. Hier eine
Übersicht der gängigsten Animationsarten:

ease-in : Die Animation startet langsam.

ease-out : Die Animation wird gegen Ende abgebremst.

ease-in-out : Die Animation startet langsam und endet langsam.

linear : Die Animation verläuft gleichmäßig.

Sie können die Animation noch sehr viel genauer in Form einer Bézierkurve festle-
gen. Dazu bietet das Cesar Animation Tool ( http://matthewlein.com/ceaser/ ) eine
wunderbare Benutzeroberfläche, die automatisch den benötigten Code generiert.

Um die Animation zu starten, wenn die Webseite geladen ist, benötigen Sie etwas
Hilfe von jQuery. Wie Sie jQuery einbinden, wissen Sie bereits. Der jQuery-Code sieht
wie folgt aus:

$(document).ready(function() {
$(".banner").toggleClass("banner_sichtbar");
});

Wenn die Seite geladen wurde, wird die Klasse des Banners durch die Klasse banner_
sichtbar ersetzt. In dieser Klasse definieren Sie nun eine neue Position des Banners: