KLIK UNTUK DUIT

Followers

Tuesday, February 28, 2012

Tutorial membuat efek berputar pada komen

Langkah-langkah  membuat efek berputar pada komen :

1. Sign blog anda
2. Klik layout.
3. Klik Add a Gadget.
4. Klik HTML / Javascript.
5. Copy kod dibawah ini, paste pada kotak HTML / Javascript.

<style type="text/css">
.avatar-image-container img, comments .avatar-image-container img {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
</style>

<script src="http://mootools-code.googlecode.com/files/mootools-1.3.2.js"></script>

<script>
window.addEvent("domready",function() {

// "Globals" - Will make things compress mo-betta
var $random = function(x) { return Math.random() * x; };
var availableWidth = 0, availableHeight = 0;
var cssPrefix = false;
switch(Browser.name) {
case "safari":cssPrefix = "webkit";break;
case "chrome":cssPrefix = "webkit";break;
case "firefox":cssPrefix = "moz";break;
case "opera":cssPrefix = "o";break;
}

// The Icons
var icons = $$(".avatar-image-container img, comments .avatar-image-container img ");
// Apply opacity
var zIndex = 1000;
// Randomize each link
icons.each(function(element,index) {
var startDeg =(360);
var resetPlace = function() {
element.fade(0.4).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
}
element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);
resetPlace();
element.addEvents({
mouseenter: function() { element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");},
mouseleave: resetPlace});
});
});
</script>


6. save

3 comments:

♥ p a a n i ♥ said...

efek berputar kt komen tu mcm mana?

Izzy said...

profile picture awk kat komen akn berputar bila anak panah terkena padanya..cuba lah uat dulu..tgok hasilnya macm mana..

zorro said...

betul tu...hu3