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

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

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”>

Sehingga keseluruhan isi file HTML akan tampak seperti ini:

simpan file HTML temen-temen.

SECOND STEP

Buatlah file CSS dengan susunan seperti ini:

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:

Menambahkan Animasi

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

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.

Seperti biasa, berikut link download Scriptnya:

Klik untuk melihat demo

Seperti itulah penjelasan dari saya, thax to thefinishedbox.com, bagi yang mau nambahin, atau ada saran kritik silakan kasih komentar.