Hallo teman-teman? pada tutorial kali ini kita akan belajar tentang Membuat Efek Pergerakan Sederhana Dengan Jquery.

Gimana kabarnya? masi semangat belajarnya? oke teman-teman kembali lagi dengan saya Fahrizal pada tutorial dumet school, pada tutorial kali ini kita akan membuat efek sederhana dengan menggunakan jquery, nah sekarang timbul pertanyaan. apa si jquery itu?

Mungkin teman-teman sedikit banyak ada yang sudah pernah belajar tentang jquery ini, namun disini saya akan menjelaskan untuk teman-teman yang belum terlalu paham tentang jquery.

jQuery adalah library JavaScript multiplatform yang dirancang untuk memudahkan penyusunan client-side script pada file HTML. jadi bisa dibilang dia adalah kumpulan script javascript yang siap pakai, namun tetap ada cara tersendiri untuk menggunakannya, sama halnya dengan framework pada php.

nah disini saya akan berikan sedikit studi kasus, yaitu gimana caranya agar sebuah element dapat kita berikan sedikit animasi, nah untuk lebih jelasnya silahkan teman-teman buat script seperti berikut ini:

Script di atas saya membuat sebuah tombol dan sebuah div dengan css yang saya letakkan inline, namun sebelumnya saya memanggil liblary jquery secara online dengan :

jika di save maka hasilnya akan seperti berikut ini:

membuat-efek-pergerakan-sederhana-dengan-jquery-1

 

Sekarang kita akan masuk pada script jquerynya, silahkan teman-teman ketikan script berikut ini untuk animasinya :

Ini ada lah script javascriptnya untuk membuat animasi kotaknya bergeser dari kiri sebanyak 250px, jika sudah teman-teman silahkan save lalu refresh browsernya, dan klik tombolnya maka hasinya akan seperti berikut ini:

membuat-efek-pergerakan-sederhana-dengan-jquery-2

kotak akan bergeser dari kiri sebanyak 250px. gimana? sangat mudah bukan teman-teman, ini adalah sedikit animasi sederhana, dimana kita bisa membuat animasi yang lebih keren lagi dengan jquery.

Untuk tutorial kali ini tentang Membuat Efek Pergerakan Sederhana Dengan Jquery  cukup sampai disini dulu, silahkan teman-teman coba dirumah, semoga tutorial kali ini bermanfaat, sampai jumpa pada tutorial selanjutnya, terimakasih.