July 13, 2024

Dasar – Dasar Efek Animasi Menggunakan jQuery

5 min read

Hai siswa PalComTech yang cakep-cakep salam programmer, berjumpa kembali dengan saya setelah kemarin kita membahas tentang pembuatan efek animasi bagian I yang menggunakan method animate. Dan sekarang saya akan memberikan lagi sebuah tutorial dasar pembuatan afek animasi yang menggunakan method slideToggle. Nah dari pada saya memberikan panjang lebar penjelasan ini,mari kita mulai tahap-tahap pembuatan efek animasi menggunakan jQuery.

Tahap pertama yang perlu kita lakukan adalah kita harus menyisipkan file jQuery atau biasa disebut fungsi library javascript yang berfungsi untuk menjalankan method-method yang dibutuhkan nantinya dalam pembuatan script jQuery, adapun file yang kita butuhkan berupa file yang berextensi js yang bisa anda download di sini.

Kemudian kita akan membuat script di text editor Dreamweaver atau di notepad sama saja,tapi disini saya menggunakan adobe dreamweaver dikarenakan lebih user friendly dan mudah untuk membuat sintak-sintak html maupun css nantinya. Silakan anda buka program dreamweaver versi apa saja boleh disini saya menggunakan adobe dreamweaver cs3 sehingga terlihat tampilan seperti dibawah ini. Baiklah, langsung saja simak tutorialnya!.

Langkah 1

Setelah itu anda buat sebuah document baru dengan mengklik toolbar file yang ada di pojok kiri dreamweaver dan pilih new seperti tampilan dibawah ini.

Langkah 2

Setelah anda klik new maka akan muncul pilihan jenis file project yang ingin anda buat mulai dari html sampai javascript, disini kita pilih file project html dan klik create  untuk membuat document html baru.

Langkah 3

Setelah tercipta sebuah document baru lalu anda pilih tab code pada pilihan type untuk pembuatan sebuah project,seperti gambar dibawah ini.

Nah dari sini kita memulai pembuatan script jQuery dan CSS tapi jangan khawatir kita tidak akan membuat dari awal,kita hanya menyisipkan script-script jQuery dan CSS kedalam code html saja.

Script yang pertama adalah kita akan menyisipkan script javascript dan fungsi library javascript atau yang disebut  jQuery kedalam tag html tepat nya dibawah tag title, berikut script nya.

[sourcecode language=”php”]
<script type="text/javascript" src="jquery-1.7.2.min.js"></script><script type="text/javascript">// <![CDATA[

$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
// ]]></script>
[/sourcecode]


Berikut penjelasan script-script yang ada diatas :

[sourcecode languege=”php”]
script type=”text/javascript” src=”jquery-1.7.2.min.js”&gt;&lt;/script
[/sourcecode]

Script ini digunakan untuk menyisipkan file jquery-1.7.2.min.js yang bertipe javascript.

$(document).ready(function() {

Hampir semua kode jquery menggunakan script diatas, kode tersebut menyatakan bahwa kalau document telah siap untuk dieksekusi oleh karena itu fungsi yang berada didalam tanda () sesudah kata ready akan dijalankan.

$(“.flip”).click(function(){

Script diatas merupakan class selector berupa class dalam CSS yang didahului dengan tanda (.) dan diikuti dengan pemberian nama class nya. (.flip) ini akan kita jumpai nanti pada script CSS yang berada dibawah script javascript, class selector ini akan bekerja jika pemakai akan mengkliknya dan kemudian fungsi yang berada dibawah nya akan dijalankan.

$(“.panel”).slideToggle(”slow”);

Script diatas merupakan class selector berupa class dalam CSS yang penulisan nya didahului dengan tanda (.) kemudian class tersebut diberi efek animasi berupa method slideToggle yang diinputkan parameter durasi nya memakai string slow.

 

Untuk pembuatan script jquery dan javascript telah selesai, berikut nya kita akan membuat script CSS untuk membuat dan mendekorasi objek kotak dengan ukuran yang akan kita sesuaikan nantinya,berikut sintak nya :

[sourcecode language=”php”]
<style type="text/css">
div.panel,p.flip {
margin:auto;
padding:10px;
text-align:center;
background:#999999;
border:solid 1px #c3c3c3;
width:604px;
}
div.panel {
height:453px;
display:none;
}
</style>
[/sourcecode]


Anda merasa bingung melihat script CSS diatas, tenang saya akan menjelaskannya satu persatu. Berikut penjelasan singkatnya :

<style type=”text/css”>

Script diatas menjelaskan bahwa script yang akan digunakan adalah script CSS, untuk mengcostum penampilan objek-objek yang akan dimasukkan kedalam web.

div.panel, p.flip {}

script ini adalah script untuk membuat beberapa tag selector dan class selector dalam satu blok program dimana tag selector nya berupa tag <div></div> dan didalam tag div terdapat class selector (.panel), begitu pula dengan tag <p></p> yang didalam nya terdapat class selector (.flip).

[sourcecode language=”php”]
margin:auto;
padding:10px;
text-align:center;
background:#999999;
border:solid 1px #c3c3c3;
width:604px;
[/sourcecode]

Nah untuk script diatas saya akan menjelaskan langsung sekaligus semuanya, script diatas ini berupa properties dan value yang akan menjadikan objek-objek yang kita masukkan kedalam web menjadi berubah gaya nya / style nya. Dimana script ini masih didalam blok program yang dimiliki oleh div.panel, p.filp {} tadi.

Untuk margin:auto; digunakan untuk meletakkan objek div.panel, p,flip dengan posisi automatic biasanya berada ditengah-tengah web.

Untuk padding:10px; digunakan untuk memberi jarak antar isi dalam tag div dan border tag div.

Untuk text-align:center; digunakan untu member perataan text pada tag p.

Untuk background:#999999; digunakan untuk memberi warna latar pada tag div dan tag p.

Untuk border:solid 1px #c3c3c3; digunakan untuk member garis bingkai pada tag div dan tag p secara berturut-turut adalah style solid width 1px dan color #c3c3c3.

Untuk width:604px; digunakan untuk menentukan lebar objek tag div dan tag p.

div.panel {}

script ini adalah script untuk membuat beberapa tag selector dan class selector dalam satu blok program dimana tag selector nya berupa tag <div></div> dan didalam tag div terdapat class selector (.panel).

height:453px;

display:none;

script ini berupa properties dan value yang akan menjadikan objek-objek yang kita masukkan kedalam web menjadi berubah gayanya / stylenya. Dimana script ini masih didalam blok program yang dimiliki oleh div.panel {}.

Setelah pembuatan script CSS selesai kita akan membuat lagi script untuk HTML yang akan kita letakkan diantara tag <body>  berikut script nya :

[sourcecode language=”php”]
<div class="panel">
<img src="photo.jpg" />
</div>
[/sourcecode]

Klik Object Ini Untuk Melihat Isi Dalamnya.

Berikut penjelasan script HTML diatas :

<div class=”panel></div>

Script html ini adalah tag <div> dan berisi atribut class yang nilai nya panel berfungsi untuk membuat sebuah objek kotak.

 

<img src=”photo.jpg” />

script html berupa tag <img> dan berisi atribut src yang berisi sebuah gambar dengan format jpg yang berfungsi untuk menambahkan sebuah gambar kedalam document web.

 

<p class=”flip”>Klik Objek Ini Untuk Melihat Isi Dalamnya</p>

Script html ini adalah tag <p> dan berisi atribut class dengan nilai flip yang berfungsi untuk membuat sebuah paragraf dengan tulisan Klik Objek Ini Untuk Melihat Isi Dalamnya.

Nah pembuatan efek animasi dasar dan sederhana kita telah selesai dibuat, silakan anda simpan file ini dengan nama terserah anda dengan ekstensi html,disini saya menyimpan dengan nama jquery_slideToggle.html.

Saya rekomendasikan untuk menyimpan satu tempat dengan file jquery-1.7.2.min.js yang anda download pada pembahasan kemarin. Setelah anda simpan silakan anda jalankan file tersebut dengan menekan tombol F12 atau klik priview in browser yang ada tanda          . Sekian tutorial yang saya buat, silakan anda kembangkan untuk memperdalam ilmu mengenai jquery.

0 thoughts on “Dasar – Dasar Efek Animasi Menggunakan jQuery

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.