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.
3 Kommentare to “To-Top Link: Teil3 - jQuery Button-Animation”
Kategorien
Letzte Artikel
- Neuer Version von Mxperts Products-Import
- Fehlersuche mit Mage::Log()
- Achtung: ungewolltes ausspionieren Ihres Onlineshops
- Backend-Navigation mit eigenem Logo (Image)
- Personalisierter Browsertitel
- Produkte importieren für Magento 1.4.x
- Kostenfreie Broschüre für Magento-Interessierte und Agenturen
- Sprachpaket | Lokalisierung für Magento ab Version 1.4
- Erweiterung: Mxperts Tooltip
- Schneegestöber für Ihren Magento-Shop
Letzte Kommentare
- ds_1984 bei Erweiterung: Mxperts - NoRegion
- mister_tt bei Erweiterung: Mxperts - NoRegion
- ds_1984 bei Erweiterung: Mxperts - NoRegion
- mister_tt bei Erweiterung: Mxperts - NoRegion
- eren bei Bewegtes Bild (Slide,Fade,Zoom)
- JoernBernd bei Neue Version Mxperts Invoice 1.0.8
- Tobi bei Erweiterung: Mxperts Tooltip
- Bali4you bei Personalisierter Browsertitel
- itintouch bei Magento-Shop nur als Katalog: Teil 4 - Zubehör, UpSelling, Produktoptionen & Layered Nav
- cbatik bei Eigene Layouts in Magento CMS integrieren
Admin Controler Animation Anleitung Backend Bestellung Bilder Blätterkatalog Block CMS Deutsch E-Mail Erweiterung Erweiterungen Extension Frontend Ausgabe Import iPhone jQuery jQuery-Tools Kategorieren importieren Kontaktformular Kurs Layered Navigation Magento 1.3 Magento Update Menü Navigation Produkt-Import Produkte rechte Spalte Scrolling seo Service Shipping-Modul Sprachfile Sprachpaket Tutorial Versandkosten Versenden Version 1.3.0 Video Vorlagen Währungen YouTube Zoom
WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.
[...] jQuery - Button-Animation [...]
Spielerei, aber warum nicht? Hat was
Mir gefällt das ziemlich gut … ich werde es mal gegen meinen bisherigen Link austauschen.