HTML and CSS Reference
In-Depth Information
.banner_sichtbar {
margin-top:0px;
}
Damit wird beim Seitenaufruf das Banner langsam eingeblendet.
Einblenden des Banners bei Aufruf eines Links
Vielleicht werden Sie sich häufiger in der Situation finden, ein Banner bei einer
bestimmten Interaktion anzeigen lassen zu wollen. Der Weg dorthin ist nicht weit,
denn den Hauptteil der Arbeit haben Sie bereits erledigt. Wenn Sie mit Klick auf
einen Button das Banner einblenden wollen, so müssen Sie lediglich einen Button
einpflegen und den jQuery-Befehl anpassen (Abbildung 4.41). Fügen Sie den Button
in den HTML-Code ein:
<button>Banner ein-/ausblenden</button>
Den jQuery-Code passen Sie wie folgt an:
$(document).ready(function() {
$("button").onclick(function() {
$(".banner").toggleClass("banner_sichtbar");
});
});
Abbildung 4.41
Das Banner über einen Button einblenden (iPhone links, Android rechts)
Sie sehen: Die Einbindung einer Animation ist einfach. In Kombination mit jQuery
können Sie auf verschiedenste Art und Weise eine Animation starten. Sie könnten
z. B. auch den Bewegungssensor eines Smartphones oder eine Touch-Geste nutzen,
um das Banner einzublenden. Hier ist Ihre Fantasie gefragt. Das Auslesen des Bewe-
gungssensors besprechen wir in Kapitel 6, »Auslesen des Bewegungssensors mit
JavaScript«.
Search WWH ::
Custom Search