Membuat Animasi Sliding Doors Menggunakan jQuery

Bismillaahirrohmaanirrohiim…

Jika temen-temen melihat web seperti detik.com, republika.co.id atau yang lainnya temen-temen bisa melihat aneka animasi seperti foto-foto yang berjalan sendiri. Bagi yang hobi mempelajari web mungkin terbesit “Bagaimana sih cara membuatnya?”. Cara membuatnya kita membutuhkan JavaScript seperti jQuery.

Nah.. pada kesempatan kali ini saya akan berbagi Bagaimana Membuat Animasi Sliding Doors? Apa itu Sliding Doors? Sliding Doors secara simpel dapat diartikan animasi Slide seperti membuka Pintu. Jika kita mengarahkan mouse ke objek tersebut, maka akan terjadi animasi seperti membuka sebuah pintu. Masih belum paham? lihat demo-nya disini.

Oke, kita langsung mulai….

Sebagai gambaran susunan foldernya akan tampak seperi gambar ini:

FIRST STEP

1. Buatlah file HTML dengan susunan seperti dibawah ini

<!doctype html>
 <html>
 <head>
 <title>jQuery Sliding Doors Tutorial | Khoiruddin.Com</title>
 </head>
 <body>
 <div id="container">

</div>
 </body>
 </html>

simpanlah dengan nama index.html
2. Sisipkan script pemanggil file CSS setelah tag </title>
<link rel=”stylesheet” href=”style.css” />
3. Sisipkan script pemanggil file JavaScript setelah script diatas

<script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
 </script>
 <script src="custom.js"></script>

Dalam tutorial kali ini saya memanggil Google jQuery API. Namun jika temen-temen ingin mendapatkan jQuery terbaru atau menggunakannya dalam keadaan offline, temen-temen dapat mendownloadnya disini.

4. Menambahkan elemen dalam tag body
tambahhkan elemen dibawah ini keladam tag <div id=”container”>

<div id=”container”>
<div id=”vertikal” class=”third”>
<img src=”images/gambar-belakang.jpg” />
<img src=”images/gambar-depan-1.jpg” class=”top” />
</div>
<div id=”kiri” class=”third”>
<img src=”images/gambar-belakang.jpg” />
<img src=”images/gambar-depan-2.jpg” class=”top” />
</div>
<div id=”kiri-bawah” class=”third last”>
<img src=”images/gambar-belakang.jpg” />
<img src=”images/gambar-depan-3.jpg” class=”top” />
</div>
<div id=”bawah” class=”third”>
<img src=”images/gambar-belakang.jpg” />
<img src=”images/gambar-depan-4.jpg” class=”top” />
</div>
<div id=”kanan” class=”third”>
<img src=”images/gambar-belakang.jpg” />
<img src=”images/gambar-depan-5.jpg” class=”top” />
</div>
<div id=”kanan-bawah” class=”third last”>
<img src=”images/gambar-belakang.jpg” />
<img src=”images/gambar-depan-6.jpg” class=”top” />
</div>[/html]
Sehingga keseluruhan isi file HTML akan tampak seperti ini:

[html]
 <!doctype html>
 <html>
 <head>
 <title>jQuery Sliding Doors | Khoiruddin.Com</title>
 <link rel="stylesheet" href="style.css" />
 <script
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
 </script>
 <script src="animasi.js"></script>
 </head>
 <body>
 <div id="container">
 <div id="vertikal" class="third">
 <img src="images/gambar-belakang.jpg" />
 <img src="images/gambar-depan-1.jpg" class="top" />
 </div>
 <div id="kiri" class="third">
 <img src="images/gambar-belakang.jpg" />
 <img src="images/gambar-depan-2.jpg" class="top" />
 </div>
 <div id="kiri-bawah" class="third last">
 <img src="images/gambar-belakang.jpg" />
 <img src="images/gambar-depan-3.jpg" class="top" />
 </div>
 <div id="bawah" class="third">
 <img src="images/gambar-belakang.jpg" />
 <img src="images/gambar-depan-4.jpg" class="top" />
 </div>
 <div id="kanan" class="third">
 <img src="images/gambar-belakang.jpg" />
 <img src="images/gambar-depan-5.jpg" class="top" />
 </div>
 <div id="kanan-bawah" class="third last">
 <img src="images/gambar-belakang.jpg" />
 <img src="images/gambar-depan-6.jpg" class="top" />
 </div>
 </div>
 </body>
 </html>

simpan file HTML temen-temen.
SECOND STEP
Buatlah file CSS dengan susunan seperti ini:

html,body{margin:0;padding:0;background:#e8e8e8}

#container { width:960px; margin:0 auto; padding-top:150px }

.third {
 width:293px;
 margin:0 40px 40px 0;
 overflow:hidden;
 float:left;
 position:relative;
 }

.third img { display:block; }

.top { position:absolute; top:0; left:0; z-index:20 }

.last { margin-right:0; }

Keterangan

Simpan dengan nama style.css. Perlu diperhatikan, bahwa overlow dalam div yang mengandung gambar disetting hidden (overflow:hidden;). ini berguna untuk menyembunyikan gambar yang keluar ketika kita menganimasikan gambar dengan class top (class=”top”). coba saja overflow:hidden; temen-temen hapus, maka akan terlihat perbedaannya.

THIRD STEP

Time for the jQuery!

Ketikkan “fungsi”-nya:

$(function() {
 // js code here
 });

Menambahkan Animasi

Dibawah ini kita akan menambahkan animasi untuk div dengan ID kiri-bawah, masukkan script berikut kedalam function.

$('#kiri-bawah').hover(function() {
 //hover on
 $('img.top', $(this)).stop().animate({left: '-293px', top: '188px'}, 500);
 //hover off
 },function() {
 $('img.top', $(this)).stop().animate({left: '0', top: '0'}, 500);
 });

Keterangan

Ketika gambar dengan posisi kiri-bawah (div id=”kiri-bawah”) dilewati mouse, maka akan mencari image/gambar ber-class top dan masuk kedalam this (disini $(this) mengacu kepada # kiri-bawah). Kemudaian jika terdapat antrian (queue) maka akan dihentikan, yang akhirnya akan menganimasi -293px dari kiri dan 188px dari atas. 500 disini digunakan untuk durasi animasi. Kemudian jika mouse temen-temen sudah tidak melewati objek (hover off), maka gambar/objek akan dianimasikan ke tempat semula (left: ’0′, top:’0′) dengan durasi 500.

Berikut code/script untuk div yang lainnya. Temen-temen dapat merubah posisi top atau posisi left sesuai animasi yang dikehendaki.

$('#vertikal').hover(function() {
 $('img.top', $(this)).stop().animate({top: '188px'}, 500);
 },function() {
 $('img.top', $(this)).stop().animate({top: '0'}, 500);
 });

$('#kiri').hover(function() {
 $('img.top', $(this)).stop().animate({left: '-293px'}, 500);
 },function() {
 $('img.top', $(this)).stop().animate({left: '0'}, 500);
 });

$('#kiri-bawah').hover(function() {
 $('img.top', $(this)).stop().animate({left: '-293px', top:
 '188px'}, 500);
 },function() {
 $('img.top', $(this)).stop().animate({left: '0', top: '0'}, 500);
 });

$('#bawah').hover(function() {
 $('img.top', $(this)).stop().animate({top: '-188px'}, 500);
 },function() {
 $('img.top', $(this)).stop().animate({top: '0'}, 500);
 });

$('#kanan').hover(function() {
 $('img.top', $(this)).stop().animate({left: '293px'}, 500);
 },function() {
 $('img.top', $(this)).stop().animate({left: '0'}, 500);
 });

$('#kanan-bawah').hover(function() {
 $('img.top', $(this)).stop().animate({left: '293px', top: '188px'}, 500);
 },function() {
 $('img.top', $(this)).stop().animate({left: '0', top: '0'}, 500);
 });

Seperti biasa, berikut link download Scriptnya: