JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web menggunakannya. JQuery memiliki slogan “Write less, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.
 |
| jQuery |
jQuery telah digunakan secara luas untuk merancang elemen interaktif seperti slider, menu, scrollers, dan sebagainya. Sebelum kita mempelajari aspek animasi, saya sarankan Anda untuk melihat pada implementasi praktis berikut, yang mungkin bisa memberikan Anda gambaran mengenai kemampuan animasi jQuery :
- Lateral pada scrool sliding
- Penggabungan gambar box dengan jQuery
- Dream Night Animation
- Animasi tutup dan buka tirai dengan jQuery
- Contoh navigation menu yang dibuat dengan jQuery
Pengenalan dasar animasi jQuery
Kebanyakan Desainer Web telah mempunyai pengetahuan tentang bekerja dengan kode dasar jQuery atau JavaScript. Mengubah visibilitas dari suatu unsur merupakan tugas umum yang disertakan di hampir setiap desain website. Disini saya hanya bisa menyembunyikan/menampilkan elemen menggunakan display CSS atau atribut visibilitas. jQuery menyederhanakan proses dengan memperkenalkan 2 fungsi yang disebut hide and show. Perhatikanlah kode berikut ini untuk menampilkan dan menyembunyikan elemen HTML secara sederhana dengan jQuery :
1. $("#panel").show();
2.
3. $("#panel").hide();
Kode diatas, bisa membuat elemen muncul dan menghilang dalam rentang waktu yang sangat terbatas.
Idealnya, kita harus memperlancar proses menyembunyikan dan menampilkan elemen menggunakan animasi untuk memberikan pengalaman yang lebih baik kepada pengguna. jQuery menyediakan 2 teknik built-in untuk menampilkan dan menyembunyikan elemen dengan efek animasi sederhana.
- Fading : mengintegrasikan gerakan memudar menjadi elemen-elemen HTML dengan mengubah opacity elemen
- Slide : Mengintegrasikan gerakan meluncur/slide ke elemen HTML dengan mengubah ketinggian elemen tersebut.
Kemudian kita akan melihat bagaimana teknik diatas menampilkan dan menyembunyikan elemen dengan efek animasi. jQuery juga merangkum kompleksitas Animasi dengan menyediakan metodebuilt-in untuk memenuhi berbagai tugas dalam desain web.
Fading
Fading disediakan oleh fungsi yang disebut Fade in dan Fade out. Opacity elemen meningkat dengan fungsi Fade in dan dikurangi oleh fungsi Fade out. Saya juga memiliki contoh fading dengan interval waktu seperti pada kode berikut :
$("#panel").FadeIn("slow");
$("#panel").FadeOut("Fast");
Disini Anda mempunyai pilihan untuk membuatnya cepat ataupun lambat dengan nilai-nilai interval waktu yang telah ditetapkan. Selain itu Anda juga dapat menggunakan angka dalam milidetik untuk menentukan durasi animasi.
Sliding
Ingat, fungsi Sliding adalah untuk mengubah ketinggian elemen bukan opacity untuk menghidupkan elemen. Fungsi dan sintaks bekerja sama persis dengan Fading, dimana Slide Updigunakan untuk bersembunyi dan Slide Down digunakan untuk menampilkan elemen. Kode berikut akan menampilkan preview penggunaan fungsi sliding :
$("#panel").SlideUp("slow");
$("#panel").SlideDown("Fast")
Parameter durasi juga akan bekerja sama dengan fungsi Fading. Disini, Anda dapat melihat awal sebenarnya dari animasi dengan menggerakkan elemen.
No comments:
Write komentar