Belajar tutorial cara menggunakan animasi jQuery

 

Dalam tutorial ini, kita akan mengeksplorasi dasar-dasar dari animasi jquery. Desain web mempunyai peran utama dalam menarik pengunjung secara konsisten. Animasi adalah fungsi inti di balik unsur-unsur interaktif dalam desain web.  Pada umumnya, web dengan desain interaktif mendapatkan perhatian lebih dibandingkan dengan desain statis lama yang polos. Dan penggunaan jQuery adalah salah satu solusi terbaik untuk menciptakan desain yang atraktif. jQuery juga membuat web/blog Anda terlihat lebih canggih dan modern. Namun cukup banyak web designer dan blogger yang tidak mengerti cara menggunakan jQuery. Oleh karena itu disini saya mempunyai sebuah tutorial yang bisa Anda jadikan pembelajaran tentang jQuery animation.

Penggunaan praktis jQuery animation
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 :


Sebagai pemula, Anda tidak bisa langsung melompat ke dalam jenis desain yang telah digambarkan sebelumnya. Jadi, disini kita hanya akan membahas dasar-dasar animasi jQuery dari sudu pemula.
 
Untuk mempelajari dengan lebih mudah mengenai animasi jQuery, disini saya mempunyai beberapa DEMO dan RESORCE FILE mengenai tutorial di bawah yang bisa Anda download DISINI.

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. Pergilah kesini untuk melihat demo dari kode diatas.

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 metode built-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. Klik disini untuk melihat demo Fade In dan Fade Out.

 Sliding
Ingat, fungsi sliding adalah untuk mengubah ketinggian elemen bukan opacity untuk menghidupkan elemen. Fungsi dan sintaks bekerja sama persis dengan Fading, dimana Slide Up digunakan 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. Klik disini untuk melihat demo Sliding.

 Persiapan dengan animasi jQuery
Kebanyakan pemula biasanya berpikir bahwa membangun animasi adalah tugas yang cukup kompleks. Pasti sulit jika Anda melakukannya dari awal. jQuery merangkum semua kompleksitas dengan menyediakan fungsi yang berdiri tunggal, yang menangani semua jenis animasi. Pada dasarnya, animasi akan dibuat dengan mengubah nilai-nilai atribut CSS. Setelah Anda terbiasa dengan fungsi animate jQuery, membangun animasi kompleks akan menjadi tugas sederhana. Lihatlah sintaks dibawah ini untuk melihat dasar animate :

$( "#panel" ).animate({
      // CSS Properties and values
    }, 5000, "linear", function() {   
      // Completion Handler
    });

Kode diatas, menggambarkan sintaks dengan menggunakan fungsi animate/hidup. Parameter pertama berisi semua properti CSS dan nilai-nilai. Parameter opsional berikutnya, mendefinisikan durasi animasi. Parameter ketiga mendefinisikan pelonggaran (tipe animasi) dan parameter akhir mendefinisikan fungsi anonim untuk menangani penyelesaian animasi. Setelah melihat dan mempelajari pemakaian dasar, kita bisa membuat sesuatu yang praktis dengan animasi jQuery.

Menghidupkan bagian gambar
Disini, Anda akan melihat bagaimana Anda bisa menampilkan gambar dengan menghidupkan bagian gambar. Pertama yang harus Anda lakukan adalah membagi gambar menjadi bagian gambar yang lebih kecil. Karena, disini gambar yang terbagi-bagi lah yang akan dijadikan animasi.

Belajar tutorial cara menggunakan animasi jQuery

Di dalam demo, Anda akan menemukan 6 gambar potongan dari gambar diatas. Setiap gambar memiliki dimensi 100px x 100px. Sub gambar dibagi menjadi 1 baris. Kemudian semua 6 blok akan diposisikan di sudut kanan atas halaman menggunakan kode berikut :

<div id="img_panel">
    <div class="img_item"><img src="1.jpg" /></div>
    <div class="img_item"><img src="2.jpg" /></div>
    <div class="img_item"><img src="3.jpg" /></div>
    <div class="img_item"><img src="4.jpg" /></div>
    <div class="img_item"><img src="5.jpg" /></div>
    <div class="img_item"><img src="6.jpg" /></div>
</div>

Disini kita telah membuat 6 gambar menjadi 1 kolom. Namun Anda juga bisa mengubahnya menjadi 2 kolom dengan menggunakan 2 kelas CSS yang disebut "img_item" untuk penempatan gambar di kolom pertama dan "img_item2" untuk penempatan gambar di kolom ke 2. Akan tetapi yang terdapat pada demo yang saya berikan, disana saya hanya memberikan 1 kolom saja. Sekarang cobalah Anda lihat kode CSS berikut untuk mengetahui posisi gambar :

.img_item{
       position: absolute;    
       right: 0px;
       opacity:0;
       top :0;
  }

    .img_item2{
       position: absolute;
       right: 0px;
       opacity:0  
       top:150px;    
    }

Berdasarkan kode diatas, semua gambar dari setiap baris/kolom akan disembunyikan dan diposisikan di atas sama 1 lain dengan menggunakan posisi absolut. Sekarang Anda dapat melihat kode jQuery untuk menghasilkan gambar melalui animasi.

$(document).ready(function(){
       var left = 0;  
     $(".img_item").each(function(i,val){
               $(this).animate({
                   left: left,
                   opacity: 1
               }, 1500 );
               left += 150;
       });
       left = 0;
     $(".img_item2").each(function(i,val){
               $(this).animate({
                   left: left,
                   opacity: 1
               }, 1500 );
               left += 150;
           });
        });

Pertama, pada demo Anda mempunyai 1 statemen seleksi filter/penyaringan img_item. Kemudian kita jalankan fungsi animate pada elemen individu untuk mengkonversi opacity ke 1 dan meninggalkan posisi relatif terhadap bagian gambar sebelumnya. Pada dasarnya, semua bagian gambar akan memulai animasi pada saat yang sama ketika memberikan output yang mirip dengan gambar berikut :

Belajar tutorial cara menggunakan animasi jQuery

Kita dapat menggunakan efek yang sama dalam slider, splash screens, galeri foto. Sekarang Anda telah mengetahui dasar-dasar dari cara bekerja animate. Berikutnya Anda akan mempelajari aspek animasi lebih dalam dengan melihat konfigurasi lanjutan.

Merancang animasi sequental
Dalam skenario sebelumnya, semua elemen memulai animasi saat halaman dibuka.  Tapi kadang-kadang, kita menginginkan animasi yang berurutan. Jadi disini kita akan memuat gambar yang sama menggunakan animasi berurutan. Dimulai dengan menentukan kode HTML :

<div id="img_panel">
        <div class="img_item"><img src="1.jpg" /></div>
        <div class="img_item"><img src="2.jpg" /></div>   
        <div class="img_item"><img src="3.jpg" /></div>
        <div class="img_item"><img src="4.jpg" /></div>
        <div class="img_item"><img src="5.jpg" /></div>
        <div class="img_item"><img src="6.jpg" /></div>
    </div>

Satu-satunya perbedaan dari kode sebelumnya adalah penggunaan kelas CSS tunggal dan bukan untuk 2 kolom/baris. Implementasi ini akan menghasilkan baris dari kode jQuery dan bukan hard coding yang menggunakan CSS. Kode CSS untuk implementasi ini akan sama dengan kode yang digunakan untuk contoh sebelumnya. Sekarang cobalah Anda lihat kode jQuery untuk animasi berurutan :

$(document).ready(function(){
       var left = 0;
       var items = $(".img_item");
       animateImg(items,0,0,0);
    });

Setelah halaman dibuka, semua elemen gambar akan menggunakan kelas img_item.

Merangkai animasi
Saya sendiri mempunyai animasi tunggal pada setiap elemen. Dalam skenario yang kompleks, kita memerlukan rangkaian beberapa animasi pada 1 elemen. Jadi, mari kita modifikasi contoh sebelumnya untuk sebuah rangkaian animasi :

var animateImg = function(items,left,height,indexNum){
 if(items.length >= indexNum){
           var item = items.get(indexNum);
           $(item).animate({
               left: left,
               top : height,
               opacity: 1
           }, 1500 ,function() {
               left += 150;
               indexNum++;
               if(indexNum  % 6 == 0){
                   left = 0;
                   height += 150;
               }
               console.log(items);
 animateImg(items,left,height,indexNum);
           }).animate({ left:left+150}, 1500);
       }
    };

Kita bisa membuat unsur-unsur rangkaian animasi dengan memanggil fungsi animate beberapa kali menggunakan notasi titik. Dalam kode sebelumnya, saya sudah memulai animasi lain setelah animasi pertama yang memakai fungsi animate. Anda juga dapat menambahkan sejumlah animasi menggunakan teknik ini. Untuk contohnya bisa Anda lihat pada file demo yang telah saya berikan. Atau bisa Anda download DISINI.

Dalam tutorial ini, saya telah mengeksplorasi berbagai kemungkinan membangun animasi dengan fungsi animate jQuery. Saya juga telah melihat berbagi teknik praktis saat menghidupkan bagian-bagian dari suatu gambar untuk menghasilkan gambar yang lengkap. Sekarang Anda hanya perlu meneliti tentang hal-hal yang disebutkan dalam daftar berikut untuk meningkatkan animasi jQuery :
  • Antrian animasi
  • Penanganan progress/kemajuan animasi
  • Penanganan langkah animasi
Diharapkan Anda memberikan waktu untuk membangun beberapa animasi yang luar biasa seperti yang tercantum pada tutorial ini. Jangan ragu untuk berbagi dan mendiskusikan tentang ini menggunakan komentar. 

Komentar

Posting Komentar