Nice Blog Header With jQuery Parallax

Hoaaammmhh,,, nguantuk nih, tapi posting duyu ah.. Lawan ngantuk nya bentar aja . Karana lagi ngantuk, hehehhe, to the point aja sob . Sekarang Giliran plugin jQeury parallax yg saya akan mau share .

Terasa asing dengan kata2 jQuery parallax ?? See the demo page here..

Demo

Di dalam demonyah saya gunakan untuk header blog . Tapi yg saya jelaskan dsini sebenarnya bukan semata-mata jQuery parallax untuk header blog . Bnyak sekali penggunaan plugin yg satu ini . Yg akan saya jelaskan adalah gimanah cara pakenya, langsung aja..

1. Masukan jQuery ini..

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

2. Masukan plugin parallax ini


<script src='http://granoblog.googlecode.com/files/jparalax.js' type='text/javascript'/>

3. Ini sedikit Css nya..


#parallax div div
{font-family: Palatino, Georgia, Trebuchet MS, serif; font-size: 20em; line-height: 0.6em;}


Nb: Ukuran font bisa diganti sesuai selera..


4. Ini sedikit juga javascriptnya..


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

$('#parallax').jparallax({triggerExposesEdges: true}).append(corners);

$('a.goto').click(function(){
var ref=$(this).attr("href");
// console.log(ref);
$('#parallax').trigger("jparallax", [ref]);
return false;
});

});

//-->
</script>


5. Yg terakhir tag htmlnya, masukan di bagian mana ajah, misalkan mau dibagian header . masukan di widget bagian header..


<div id='parallax' style='position:relative; overflow:hidden; width:60em; height:320px; background: #2F3134;'>

<div style='width:1200px; height:640px;'>
<div style='position:absolute; top:280px; left:150px; color:#9bc0e5'>
<a name='G'/>
G
</div>
</div>

<div style='width:1800px; height:420px;'>
<div style='position:absolute; top:180px; left:330px; color:#a4c522'>
<a name='i'/>
i
</div>
</div>

<div style='width:1400px; height:460px;'>
<div style='position:absolute; top:140px; left:360px; color:#e99400'>
<a name='B'/>
B
</div>
</div>

<div style='width:2000px; height:495px;'>
<div style='position:absolute; top:260px; left:520px; color:#b50c0c;'>
<a name='l'/>
l
</div>
</div>

<div style='width:1540px; height:480px;'>
<div style='position:absolute; top:230px; left:540px; color:#e99400;'>
<a name='o'/>
o
</div>
<div style='position:absolute; top:220px; left:780px; color:#b50c0c;'>
<a name='G'/>
G
</div>
</div>

</div>


Nb:
>> Untuk Huruf2 G I B L O G, yg pasti ganti sessuai keinginan sobat .
>> Warna Dari huruf2 juga bisa diganti
>> Besar kecil div id parallax juga bisa diganti .


Yup selesai deh . Mudah kan ?? Cukup menarik menurut saya kalo ditempatkan di bagian header . tapi gag tau lg gimana menurut sobat ?