To-Top Link: Teil3 – jQuery Button-Animation
In diesem Kapitel wollen wir uns nun mit dem Animieren unseren To-Top Buttons beschäftigen. Auch dafür erstellen wir uns eine kleine HTML-Anwednung die uns als Testumgebung dient.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../js/animation_step1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link rel="stylesheet" type="text/css" href="../css/animation_step1.css">
</head>
<body>
<br>
<div id="toTop"><IMG src="../images/to-top-button.gif"> Text</div>
</body>
</html>
Zuerst formatieren wir unseren Link und das Bild mittels CSS. Das Bild muss absolut positioniert werden, damit es frei positioniertbar ist. Nur dann kann man das Bild mit einer Pfad-Animation versehen.
#toTop {
position: absolute;
padding: 2px 0 0 30px;
}
#toTop img {
position: absolute;
top: -4px;
left: -4px;
border: none;
}
Um die Animation zu erreichen füge ich mehrere animate Befehele aneinander. Durch geschicktes Verändern der Position entsteht dabei ein Animations-Effekt. Um die Animation zu starten implementieren wie einen hover Event. Das Javascript dafür sieht wie folgt aus:
jQuery(document).ready(function(){
jQuery("#toTop").hover(function(){ // Bei Mouse-Over animieren
jQuery("#toTop IMG")
.animate({top:"-12px"}, 200).animate({top:"0px"}, 200) // Animation
.animate({top:"-8px"}, 100).animate({top:"-2px"}, 100)
.animate({top:"-6px"}, 60).animate({top:"-4px"}, 60)
.animate({left:"-5px"}, 30).animate({left:"-4px"}, 30)
.animate({top:"-5px"}, 30).animate({top:"-4px"}, 30)
.animate({left:"-5px"}, 30).animate({left:"-4px"}, 30)
;
});
});
Das Ergebnis: animation_step1.html
Spielen Sie etwas mit den Parametern und erstellen Sie sich Ihre eigene individuelle Animation.
Nun müssen wir nur noch die Animation in unsere Anwendung aus Teil 2 integrieren. Als erstes passen wir das HTML-Dokument an und integrieren das Bild mit unserem Pfeil.
... <a href="#" id="toTop"><IMG src="../images/to-top-button.png">nach Oben</a> ...
Die CSS-Anweisung für den Pfeil muss auch übertragen werden.
...
#toTop img {
position: absolute;
top: -4px;
left: -16px;
border: none;
}
Nur noch das Javascript anpassen und unsere Vorlage zur Umsetzung in den Shop ist fertig. Wir erweitern unsere Defintion mit unserem hover Event.
...
jQuery("#toTop").scrollToTop(); // Zuweisen von scrollToTop
});
jQuery("#toTop").hover(function(){ // Bei Mouse-Over animieren
jQuery("#toTop IMG")
.animate({top:"-12px"}, 200).animate({top:"0px"}, 200) // Animation
.animate({top:"-8px"}, 100).animate({top:"-2px"}, 100)
.animate({top:"-6px"}, 60).animate({top:"-4px"}, 60)
.animate({left:"-17px"}, 30).animate({left:"-16px"}, 30)
.animate({top:"-5px"}, 30).animate({top:"-4px"}, 30)
.animate({left:"-17px"}, 30).animate({left:"-16px"}, 30)
;
});
...
Das Ergebnis: scroll_to_top_animated.html
Alle Files finden Sie hier als ZIP-Datei zum DOWNLOAD.
Spielerei, aber warum nicht? Hat was
War diese Antwort hilfreich?
LikeDislikeMir gefällt das ziemlich gut … ich werde es mal gegen meinen bisherigen Link austauschen.
War diese Antwort hilfreich?
LikeDislike