jQuery Animasi Gambar Latar

Walaupun sedang menghadapi penelitian tentang "Virtual Desktop^[1]" tetapi Blogger Tune-Up tidak ingin begitu terlalu terlarut dalam penelitian tersebut. Masalahnya sederhana, karena kekurangan dana dan "spare part" yang sangat sulit didapat, maklumlah Blogger Cekak (hehehe...). Artikel kali ini masih berhubungan dengan jQuery, yang akan kita implementasikan pada menu dengan sentuhan efek animasi gambar latar (jQuery Background Image Animation)^[2] menggunakan plugin Background-Position versi 1.02^[3].

Bagaimana jQuery Animasi Gambar Latar bekerja? Pada saat default (tidak diakses) maka menu akan menggunakan gambar latar dalam posisi tertentu, dan pada saat mouse diarahkan pada menu (hover) maka background akan diubah dalam posisi berbeda. Keindahan menu ini terdapat pada perubahan background yang bergeser dengan lembut layaknya efek slide. Penasaran? Lihat demonya...

Background Image Animation

Skenario Implementasi jQuery Background Image Animation

1. Kode HTML

Ini merupakan kode dasar untuk membuat suatu elemen HTML, semisal kita akan membuat suatu menu dengan struktur seperti dibawah ini:

<div id="nav">
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</div>

2. Kode CSS

Untuk memberikan sentuhan menu yang lebih indah, maka kita memerlukan kode CSS. Kode CSS ini dibuat dengan posisi menu default (sebelah kiri), di blok dan dengan sedikit jarak. Seperti dibawah ini:

#nav {
margin:2px 0;
padding:0;
}
#nav ul {
list-style:none;
margin:0;
padding:0;
}
#nav ul li {
float:left;
width:100px;
margin:0;
padding:0;
text-align:center;
}
#nav ul li a {
display:block;
padding:5px 10px;
height:100%;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
}
#nav ul li a {
background:url(bg.jpg) repeat 0 0;
}
#nav ul li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}

Perhatikan kode diatas bahwa hover (jika pointer mouse diatas menu) telah dideklarasikan. Hal ini dilakukan jika ada para pengunjung yang menonaktifkan JavaScript pada browser-nya maka menu tetap bekerja dengan perubahan background tanpa animasi. Background dideklarasikan pada #nav ul li a secara terpisah, hal ini agar dapat berdiri sendiri tetapi posisi background harus di set ulang sesuai dengan background yang akan digunakan sebagai efek.

3. Gambar Latar (Background)

Gambar latar (background) dapat kita buat sesuai dengan keinginan tentunya dengan efek yang lebih beragam, dibawah ini hanyalah contoh.

Gambar 1 (Swipel)

Gambar diatas digunakan untuk membuat efek swipel (menggeser kesamping). Dimensi gambar diatas berukuran 300 pixel (lebar) x 50 pixel (tinggi) sehingga kode CSS dituliskan seperti dibawah ini:

Posisi default:

#nav ul li a {
background:url(bg.jpg) repeat 0 0;
}

Posisi mouseover (hover):

#nav ul li a:hover, li a:focus, li a:active {
background-position:-150px 0;
}

Nilai -150px berarti background digeser kesebelah kiri sebanyak 150 pixel. Nilai 0 0 artinya background pada posisi sebelah kiri atas (0=kiri 0=atas)

Gambar 2 (Slidedown)

Gambar diatas digunakan untuk membuat efek slidedown (menggeser kebawah).

Dimensi gambar diatas berukuran 200 pixel (lebar) x 100 pixel (tinggi) sehingga kode CSS dituliskan seperti dibawah ini:

Posisi default:

#nav ul li a {
background:url(bg.jpg) repeat 0 -50px;
}

Posisi mouseover (hover):

#nav ul li a:hover, li a:focus, li a:active {
background-position: 0 0;
}

Nilai -50px berarti background diambil posisi paling bawah sebanyak 50 pixel dan pada saat mouseover (hover) maka background akan digeser kebawah pada posisi 0 pixel.

Gambar 3 (Fade)

Gambar diatas digunakan untuk membuat efek slidedown (menggeser kebawah).

Dimensi gambar diatas berukuran 200 pixel (lebar) x 300 pixel (tinggi) sehingga kode CSS dituliskan seperti dibawah ini:

Posisi default:

#nav ul li a {
background:url(bg.jpg) repeat 0 0;
}

Posisi mouseover (hover):

#nav ul li a:hover, li a:focus, li a:active {
background-position: 0 -250px;
}

Nilai -250px berarti background digeser kebawah sebanyak 250 pixel.

4. Kode jQuery

Inilah kode jQuery yang akan memberikan efek animasi tertentu ketika mouse over (pointer mouse digeser ke menu) dan mouse out (pointer mouse digeser meninggalkan menu).

$(function () {
$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
});

Mari kita jabarkan script diatas:

$(function () {

Script diatas untuk mendeklarasikan bahwa semua kode didalamnya merupakan fungsi jQuery

$('#nav a')

Script diatas untuk mengenalkan pada jQuery bahwa efek akan dikenakan pada kode didalam kurung ('#nav a')

.css( {backgroundPosition: "0 0"} )

Script diatas untuk mengeset ulang kode CSS agar background pada posisi 0 0 (kiri atas)

.mouseover(function(){

Script diatas untuk memulai efek ketika mouse over (pointer mouse berada pada posisi menu)

$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})

Script diatas untuk memulai animasi (menggeser background) hingga background berhenti pada posisi 0 -250px (efek slidedup) dengan durasi (lama waktu) pergeseran 500 mili detik

.mouseout(function(){

Script diatas untuk memulai efek ketika mouse out (pointer mouse meninggalkan/keluar menu)

$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})

Script diatas untuk memulai animasi (menggeser background) hingga background berhenti pada posisi 0 0 (efek slidedown) dengan durasi (lama waktu) pergeseran 500 mili detik

});

Script penutup fungsi jQuery

Hal yang harus diperhatikan adalah kemampuan anda dalam mengolah kode CSS dan ukuran gambar karena fungsi script jQuery diatas digunakan untuk mengeset ulang kode CSS yang mempengaruhi posisi gambar latar (background).

Background Image Animation

Keterangan:

Efek ini bekerja dengan framework jQuery dan plugin Background-Position, maka jangan lupa menyertakan didalam kode HTML atau diantara tag head bagi para blogger, seperti dibawah ini:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type='text/javascript' src='http://hensblog.googlecode.com/files/imgposition.js'/>

Kemudian ikut sertakan kode selanjutnya, seperti dibawah ini:

<script type='text/javascript'>
//<![CDATA[
$(function () {
$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -250px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
});
//]]>
</script>

Selamat mencoba dan semoga berhasil. Happy blogging to write less, do more...

Special Thanks to:
1. Interactive Virtual Desktop by Hendriono Online
2. Using jQuery for Background Image Animations by Jonathan Snook
3. Background-Position Plugin by Alexander Farkas