2. Tutorial Membuat ANIMASI YOYO

Kali ini saya akan memberikan sedikit tutorial jquery, dengan tema animasi dasar. Pada tutorial kali ini saya akan memberikan sebuah contoh yaitu animasi yoyo.
Hasil akhir dari tutorial ini adalah sebagai berikut….,
keterangan : klik pada gambar tangan, maka kita akan mulai permainan yoyo….

Baiklah kita mulai saja, 
Pertama-tama yang harus disiapkan ada 3 buah gambar, yaitu gambar tangan, tali dan yoyo.

Kita akan mempelajari tiga bagian dalam tutorial ini yaitu

1. HTML
2. CSS
3. Javascript

Untuk yang pertama yaitu HTML, dalam script HTML kita buat 3 buah

dengan id masing masing “tangan”, “tali” dan “yoyo”

Kemudian untuk script CSSnya sebagai berikut (beserta penjelasan)

#tangan{
background:url(tangan2.gif);
width:150px;
height:87px;
position:absolute;
left:50px;
top:0px;

}
#tali{
background:url(tali2.gif);
width:150px;
height:8px;
position:absolute;
left:50px;
top:87px;

}
#yoyo{
background:url(yoyo2.gif) left no-repeat;
width:150px;
height:54px;
position:absolute;
left:50px;
top:85px;
}

Kemudian untuk javascriptnya ada beberapa yang perlu dilakukan yaitu

Animasi akan dijalankan ketika event mousedown (klik) terhadap div “tangan” , berikut script untuk menginisialisasi jquery dan event click pada div “tangan”

$(document).ready(function() {
$(”div#tangan”).click(function(){
/*……..script pda event click……….*/
});

});

Kemudian buat fungsi .animate ( standar jquery ) untuk tiap div (”tangan”, “tali” dan “yoyo”), fungsi animate ini akan dibuat dua kali yaitu yang pertama ketika memulai yoyo, menurunkan yoyo dan yang kedua untuk menarik kembali yoyo ke atas.

Untuk div “tangan” isi property top dengan “20px” untuk fungsi animate yang pertama, fungsi ini akan membuat animasi tangan bergerak ke bawah, dan “0px” ( nilai semula) untuk mengembalikan posisi tangan ke tempat semula.

$(”div#tangan”).animate({
top: “20px”
})
.animate({
top: “0px”
}, “slow”);

Untuk div “tali” isi property height dengan “150px” untuk fungsi animate yang pertama, fungsi ini akan membuat animasi tali memanjang dan bergerak ke bawah, dan “8px” ( nilai semula) untuk mengembalikan posisi tali ke tempat semula.

$(”div#tali”).animate({
height: “150px”
})
.animate({
height: “8px”
}, “slow”);

Untuk div “yoyo” isi property top dengan “200px” untuk fungsi animate yang pertama, fungsi ini akan membuat animasi yoyo bergerak ke bawah, dan “85px” ( nilai semula) untuk mengembalikan posisi yoyo ke tempat semula.

$(”div#yoyo”).animate({
top: “200px”
})
.animate({
top: “87px”
}, “slow”);

Source code bisa didownload DI SINI, dan jika ada pertanyaan silahkan ditanyakan saja di tempat komentar, semoga bisa membantu.