Media Pengembangan Web & App | by APPKEY

Pembuatan Website Front end Membuat Website Lebih Menarik dan Animatif dengan Teknik Dasar...

Membuat Website Lebih Menarik dan Animatif dengan Teknik Dasar jQuery JavaScript, Cocok untuk Pemula!

-

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.

Mengenal Berbagai Effect dalam jQuery

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  Jasa Pembuat Website Toko Online Murah

Membuat Animasi pada jQuery: Basic Syntax Animasi jQuery

syntax animasi

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  Arti Hosting | Apa yang Dimaksud Hosting?

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.

<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("fast");
alert("The slide toggle effect has completed.");
});
});
</script>

Demikianlah beberapa teknik dasar dalam pembuatan website yang lebih menarik dan animatif dengan menggunakan jQuery. Teknik-teknik ini adalah teknik dasar sehingga cocok dicoba untuk Anda yang baru terjun dalam dunia coding.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Mau Jadi Front-end Developer? Kamu Perlu Menguasai 10 Skill Berikut Ini!

Secara umum untuk membuat sebuah website impian Anda menjadi nyata, Anda hanya perlu datang ke web developer dan menyampaikan...

Mockup adalah: Membuat Mockup Design untuk Website

Wireframes adalah kerangka. Prototipe menunjukkan perilaku. Mockup adalah kulitnya. Dalam artikel ini, kami akan menjelaskan mengapa mockup sama pentingnya dengan...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya