Mari kita putar!
Posted by mkhairulDulu masa Google+ baru launch, bila tambah user ke circle, dia ada putar itu circle. Time tu aku macam, kenapa ada animation ni? perlukah? Rasanya saja nak buat gempak kot.
So dari dulu lagi nak buat animation macam tu, saje je la, kalo korang letak kat Final Year Projek korang mesti lecturer atau rakan sekelas anda kagum, tapi kalo putar je tak buat apa tak guna jugak. Sebab tu post ni, aku akan tunjukkan macam mana nak putar! Kita putar icon tu, kita putar gambar ni! Kita putar Halim! Tapi aku hanya akan menurunkan hikmat putaran ni saja, yang lain tu kena guna kreativiti sendiri.
Nak tengok benda tu beraksi, http://jsfiddle.net/mkhairul/pmuEw/
Mula start ngan html biasa, aku pi straight to the point.
<div class="container">
<img src="http://sembangprogramming.com/gplus-icon.png" alt="" />
</div>
CSS nya sikit je, kasi image tu position: relative
.container img{ position: relative; }
Pastu include jQuery dan juga plugin yang bernama jqueryrotate.
Javascript ni aku amik sikit dari page jqueryrotate tu.
$('.container img').click(function(){
var move;
var rotate;
if($(this).css('left') == '100px')
{
move = '0px';
rotate = -360;
}
else
{
move = '100px';
rotate = 360;
}
var rotation = function (el){
$(el).rotate({
angle:0,
animateTo:rotate,
callback: rotation,
easing: function (x,t,b,c,d){ // t: current time, b: begInnIng value, c: change In value, d: duration
return c*(t/d)+b;
}
});
}
rotation(this);
var self = this;
$(this).animate({left:move}, 1000, 'easeOutCubic')
})
Apa javascript ni buat adalah, bila click image, dia putar dan gerak 100px ke kanan. Kalau klik lagi, dia gerak 100px ke kiri lak, balik ke tempat asal.
Ni warmup post, jadi tak berat sangat. Kasi ringan dan simple.
Lagi satu, code akhir kat javascript tu, ada easing function “easeOutCubic” memerlukan jQuery UI. Kalo malas nak download buang je bahagian tu jadikan dia
$(this).animate({left:move}, 1000)
