Membuat animasi web dengan javascript

jQuery adalah salah satu library Javascript terpopuler dan paling banyak digunakan saat ini. Mengoperasikannya pun terbilang cukup mudah. Dengan kemudahan yang ditawarkan ini pula, membuat jQuery cocok digunakan oleh para developer website pemula.

jQuery adalah salah satu pilihan library JavaScript yang dapat membuat situs Anda lebih menarik dengan berbagai efek serta animasi.

Ada beberapa properti CSS yang dapat dianimasikan dengan jQuery yaitu, width, height, margin, padding, opacity, top, dan left. Properti ini disebut sebagai properti numerik. Properti non-numerik tidak dapat dianimasikan dengan fungsionalitas jQuery yang bersifat dasar. Untuk membuat animasi warna, Anda dapat menggunakan plugin warna jQuery.

Artikel kali ini akan mengulas beberapa teknik yang dapat membuat website Anda lebih menarik dan animatif. Berikut kami sajikan beberapa metode menganimasi properti pada HTML menggunakan jQuery.

Table of Contents

Mengenal Berbagai Effect dalam jQuery

Sebelum melangkah lebih jauh mengenal bagaimana cara menganimasikan website dengan jQuery, perlu Anda ketahui beberapa fungsi effect yang ada pada jQuery yang kami jabarkan sebagai berikut:

• hide() adalah fungsi effect untuk menyembunyikan suatu element.
• show() adalah fungsi effect untuk menampilkan suatu element.
• toggle() adalah fungsi effect untuk menampilkan dan menyembunyikan element.
• fadeIn() adalah fungsi effect untuk menampilkan element dengan efek memudar.
• fadeOut() adalah fungsi effect untuk menyembunyikan element dengan efek memudar.
• fadeToggle() adalah fungsi effect untuk menampilkan dan menyembunyikan element dengan effect memudar.
• slideDown() adalah fungsi effect untuk menampilkan elemen dengan effect slide ke bawah.
• slideUP() adalah fungsi effect untuk menyembunyikan elemen dengan effect slide ke atas.
• slideToggle() adalah fungsi effect untuk menampilkan dan menyembunyikan element dengan efek slide.
• animation() adalah fungsi effect untuk menggerakan atau menganimasi element.

Penggunaan fungsi effect pada jQuery ini cenderung mudah karena fungsi effect memiliki syntax yang lebih pendek. Berikut adalah contoh code penggunaan fungsi effect show dan fungsi effect hide.

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('.box').show();
});
$("button2").click(function(){
$('.box').hide();
});
});
</script>

Berikut adalah contoh penggunaan fungsi effect slide dengan menggunakan code:

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('.box').slideDown();
});
$("button2").click(function(){
$('.box').slideUP();
});
$("button2").click(function(){
$('.box').slideToggle();
});
});
</script>

Bisa dilihat dari perbedaan kedua rumus tersebut, Anda hanya perlu mengubah fungsi effect yang ada pada code- code tersebut saja. Selain itu Anda dapat menambahkan fungsi baru bila membutuhkan lebih banyak fungsi effect. Mudah bukan? Mari beranjak ke fungsi effect animasi.

Artikel Terkait  Membuat Hosting Sendiri dan Domain Sendiri

Membuat Animasi pada jQuery: Basic Syntax Animasi jQuery

Pada dasarnya fungsi effect animasi mirip dengan fungsi effect lainnya. Hanya saja pada fungsi animasi, Anda perlu menambahkan durasi animasi dan melakukan callback. Adapun sintaks dasar metode animasi dalam jQuery adalah:

$(selector) .animate({ properties }, duration, callback);

Parameter animate() menentukan properti CSS yang akan dianimasikan. Parameter durasi untuk menentukan berapa lama animasi yang Anda buat ini akan berjalan. Durasi ini pun bersifat opsional atau dapat ditentukan menggunakan salah satu string yang telah ditentukan, seperti ‘slow’ atau ‘fast’.

Anda juga dapat mengubahnya dalam satuan milidetik. Semakin tinggi nilainya, membuat animasi Anda akan semakin lambat begitu pula sebaliknya, semakin rendah nilainya maka animasi Anda juga akan semakin cepat. Kemudian, parameter callback  yang juga bersifat opsional, untuk memanggil atau mengulang kembali animasi yang telah selesai.

Berikut ini adalah contoh rumus menggerakan gambar dari posisinya 500 piksel ke kiri saat mengklik tombol.

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
right: 500
});
});
});
</script>

Seluruh elemen HTML mempunyai posisi statis pada settingan dasarnya di jQuery. Elemen statis tidak dapat dipindahkan, untuk itu Anda harus mengatur property posisi CSS agar elemen dapat bergerak dengan nilai relative, fixed, atau absolute untuk menganimasi posisinya.

Menganimasi Beberapa Properti Sekaligus

Dengan parameter animate(), Anda juga dapat menganimasi beberapa properti elemen sekaligus secara bersamaan. Namun, hal yang perlu diperhatikan adalah sebelum menganimasi property border-width, Anda harus megatur property border-style.

Elemen ANda harus mempunyai batas sebelum dapat menganimasikan border width, karena properti border-style tidak memiliki nilai standar atau nilai bawaan.

Berikut contoh code tersebut.

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>

Menganimasi Banyak Properti Satu per Satu (Queued Animation)

Anda dapat menganimasi banyak properti elemen satu per satu dalam queue dengan fitur chaining jQuery. Fitur ini juga memungkinkan Anda melakukan beberapa tindakan pada tetapan elemen yang sama dalam satu baris kode.  Berikut contoh rumusnya:

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p")
.animate({width: "100%"})
.animate({fontSize: "50px"})
.animate({borderWidth: 35});
});
});
</script>

Anda juga dapat menjadikan kode tersebut menjadi satu baris kode seperti pada rumus sintaks di atas. Rumusnya menjadi:

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").animate({width: "100%"}).animate({fontSize: "50px"}).animate({borderWidth: 35});
});
});
</script>

Rumus ini adalah rumus untuk metode chaining three animate(). Ketika seorang pengguna mengklik tombol pemicu, hal tersebut akan memperluas <p> menuju 100% width. Begitu perubahan width selesai, font size mulai dianimasikan, kemudian border animation akan dimulai.

Artikel Terkait  Cara Mengganti Port SSH di VPS dengan Mudah

Properti Animasi dengan Nilai Relatif

Anda dapat menentukan nilai relative pada properti animasi. Apabila nilai ditentukan dengan awal += atau -=, maka nilai target dihitung dengan menambah atau mengurangi angka yang diberikan dari nilai properti.

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>

Menggunakan Fungsi String untuk Properti Animasi yang Nilainya telah Ditentukan

Setiap properti tidak hanya dapat menggunakan nilai numerik, salah satu cara mudah menganimasikan website Anda dengan menggunakan string, seperti, show, hide, dan toggle. Metode ini membantu ketika Anda hanya ingin menghidupkan properti dari nilai saat ini ke nilai awal atau pun sebaliknya.  Berikut salah satu contoh rumus menggunakan string toggle:
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>

Menghentikan Animasi

Menghentikan animasi atau efek yang sedang berjalan pada elemen yang belum selesai dapat menggunakan parameter stop(). Sintaks dasar metode ini adalah:

$(selector).stop(stopAll, goToEnd);

StopAll pada rumus tersebut merupakan Boolean opsional yang memnentukan untuk menghapus queued animation atau tidak. Kemudian, terdapat nilai tetap atau standar false yang berarti animasi yang sedang berjalan akan dihentikan, animasi lainnya dalam queued akan setengah berjalan. Lalu, Boolean goToEnd opsional menentukan animasi tersebut akan segera selesai atu tidak. Berikut contoh rumus Stop Animation:

script type="text/javascript">
$(document).ready(function(){
// Start animation
$(".start-btn").click(function(){
$("img").animate({left: "+=200px"}, 2000);
});

// Stop running animation
$(“.stop-btn”).click(function(){
$(“img”).stop();
});

// Start animation in the opposite direction
$(“.back-btn”).click(function(){
$(“img”).animate({left: “-=200px”}, 2000);
});

// Reset to default
$(".reset-btn").click(function(){
$("img").animate({left: "0"}, "fast");
});
});
</script>

Fungsi Callback

Pada JavaScript pernyataan umumnya dilakukan per baris. Namun, efek jQuery biasanya membutuhkan waktu untuk menyelesaikan kode baris, sehingga kode baris berikutnya akan dieksekusi saat efek sebelumnya masih berjalan.

Menghindari hal tersebut kita dapat menggunakan fungsi callback. Fungsi callback ini bisa diterapkan pada semua fungsi effect pada jQuery tidak terbatas pada fungsi animasi saja. Berikut contoh penerapan callback.