Membuat Gambar Efek slide, saat Mouse Hover

Ehm…Bingung saya sudah bulak-balik atur posisi masih juga gak bisa tidur, ahaha. saya mau update loefa-cebook sajalah, hehe kebetulan saya punya script yang menurut saya menarik untuk dibagikan, script ini adalah script untuk memberi efek slide atau animasi pada gambar, yang dapat anda pasang pada blog anda.

Untuk melihat bagaimana efek animasi ini silahkan anda mengklik tombol demo konten berikut :

Demo konten

Dan tahap pertama dalam untuk membuat efek slide ini pertama-tama anda siapkan dua gambar dengan ukuran yang sama, dan di satukan menjadi satu gambar seperti gambar beikut,

Gambar 1. Bentuk gambar jika ingin slide kesamping

Gambar 2. Bentuk gambar Jika ingin slide keatas

Gambar-gambar ini merupakan dua gambar dengan ukuran masing-masing 250x130px dan yang kecil 32x32px, dan disatukan. Setelah dua gambar ini di satukan, anda bisa upload ke blogger, melalui postingan dan mengambil link gambarnya.

Tahap selanjutnya anda bisa memasukan kode html berikut pada widget HTML/JAVASCRIPT di blogger.

<div class="contoh2">
<a href="#"><img src="contoh1.png" alt="" />
</a>
</div>

Jangan lupa ganti “contoh1.png” dengan link gambar yang sudah di upload tadi. dan tahap selanjut kita kasih style, dengan menambah kode css berikut b:skin.

.contoh2{
margin:3px;
float:left;
width:250px;
height:130px;
position:relative;
overflow:hidden;
}
.contoh2 img {
 position:absolute;
}

Dicss ini ukurannya adalah satu bagian gambar. Nah jika sudah seperti ini kita tinggal masukin jquerynya untuk member efek slidenya, dan berikut adalah kodenya, namun pastikan dalam template anda sudah ada jquery,dan plugin jquery easing. Jika dalam template anda sudah ada, anda tinggal memasukan javascriptnya saja, mulai dari <script type="text/javascript"> sampai kebawah. Masukan kode ini tepat sebelum penutupan head </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src='http://loefa-cebook.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'></script>


<script type="text/javascript">
$(document).ready(function(){

$(".contoh2").hover(function(){
$("img", this).animate({left:"-250px"},{
queue:true,
duration:500,
easing:'easeOutBounce'
});
}, function() {
$("img", this).animate({left:"0px"},{
queue:true,
duration:500,
easing:'easeOutBounce'
});
});
 
});

</script>

Dan terakhir untuk setting slidenya anda tinggal merubah kode options yang ada pada kode javasript. Seperti :

left:"-250px" untuk arah dan posisi gambar saat mouse hover jika slide keatas ganti "left" dengan "top".

duration:500 , untuk kecepatan, semkin kecil angka semakin cepat, slidenya,

easing:'easeOutBounce' : untuk efek yang dihasilkan oleh plugin jquery easing, untuk efek easing yang lainnya silahkan klik disini untuk melihat pilihan efek easing jquery. Jika anda tidak mau memakai efek ini tinggal dihapus saja.

Dan demikian trik sederhana ini, semoga bermanfaat, dan saya ucapkan selamat menjalankan ibadah puasa untuk anda yang menjalankannya. :)