Home

About Proweb

Services

Paket website

Portfolio

Articles

Career

Contact Us

Search

Membuat variasi header dengan JQuery Bounce Effects

Pernahkah kita berkunjung ke salah satu website yang bagian headernanya ketika kursor di arahkan ke bagian tersebut maka akan menimbulkan aksi, ini merupakan salah satu variasi dalam membuat header dengan cara yang berbeda, sebagai salah satu website yang menerapkan hal seperti itu adalah, bisa di cek : http://www.markem-imaje.com/

Berikut sekilas gambaran website tersebut,

Menarik bukan bagaimana langkah awal dalam membuat header semacam itu

1. Script JQuery

$(document).ready(function(){
 
	///single
    $("ul#single li").mouseover(function(){
        $(this).stop().animate({height:'400px'},{queue:false, 
duration:600, easing: 'easeOutBounce'})
    });
 
    $("ul#single li").mouseout(function(){
         $(this).stop().animate({height:'42px'},{queue:false, 
duration:600, easing: 'easeOutBounce'})
    });
 
	//horizontal
    $("ul#horizontal li").mouseover(function(){
        $(this).stop().animate({width:'650px'},{queue:false, 
duration:600, easing: 'easeOutBounce'})
    });
 
    $("ul#horizontal li").mouseout(function(){
        $(this).stop().animate({width:'40px'},{queue:false, 
duration:600, easing: 'easeOutBounce'})
    });
 
	//vertical
	 $("ul#vertical li").mouseover(function(){
        $(this).stop().animate({height:'400px'},{queue:false, 
duration:600, easing: 'easeOutBounce'})
    });
 
    $("ul#vertical li").mouseout(function(){
        $(this).stop().animate({height:'42px'},{queue:false, 
duration:600, easing: 'easeOutBounce'})
    });
 
});

HTML

<ul id="single"> 
		<li><img src="6.jpg" width="782" alt="" 
height="440" /></li> 
	</ul> 
 
	<br clear="all" />
 
	<h2>Horizontal Gallery Effect</h2>
 
	<ul id="horizontal"> 
		<li><img src="1.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="2.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="3.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="4.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="5.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="6.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="7.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="8.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="9.jpg" width="782" alt="" 
       height="440" /></li> 
 	</ul> 
 
	<br clear="all" /><br clear="all" />
 
	<h2>Vertical Gallery Effect</h2>
 
	<ul id="vertical"> 
		<li><img src="1.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="2.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="3.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="4.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="5.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="6.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="7.jpg" width="782" alt="" 
       height="440" /></li> 
		<li><img src="8.jpg" width="782" alt="" 
       height="440" /></li> 
 		<li><img src="9.jpg" width="782" alt="" 
       height="440" /></li> 
	</ul>

Berikut hasil yang dapat di tunjukan, Demikianlah yang penulis dapat terangkan semoga bermanfaat untuk pembaca, untuk dapat mengdownload versi lengkap dari source code yang di atas silahkan kunjungi halaman berikut ini.

Kunjungi www.prowebpro.com untuk menambah wawasan anda.