Membuat Parallax Scrolling Effect Sederhana Untuk Blogger

Seperti yang anda lihat di halaman blogger ini, backgroundnya menggunakan parallax scrolling effect, parallax adalah effect dimana background bergerak sesuai dengan yang kita atur saat page discroll, aturan itu bisa saja berupa pelambatan gerak, perubahan arah dan lain - lain, ok untuk menggunakan parallax scrolling effect untuk blogger yang sederhana (seperti background blog ini) yaitu :
1. deklarasikan sebuah library jquery dibagian head, sebelum tag </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

2. Masukkan sebuah html seperti berikut setelah tag <body>

<div class="bgWrapper"></div>

3. Masukkan kode berikut sebelum tag </b:skin> untuk memasang background

.bgWrapper{
 position:fixed;
 background:url(http://your-url-image.jpg.png) top center; 
 height:100%; 
 width:100%; 
 top:0; 
 left:0;
 z-index:-1;
}

ganti url image sesuai yang anda inginkan.

4. Masukkan javascript berikut sebelum tag </body>

<script type='text/javascript'> 
$(document).ready(function(){
 $(window).bind('scroll',function(e){
     parallaxScroll();
    });
 
    function parallaxScroll(){
     var scrolledY = $(window).scrollTop();$('.bgWrapper').css('background-position','center -'+((scrolledY*0.2))+'px');
    }
 }); </script>

0.2 maksudnya adalah kecepatan gerak background, default adalah 1.

5. selesai, dengan kreatifitas serta trial and error, anda akan bisa membuat tidak hanya parallax effect seperti di blog ini melainkan juga yang lebih kompleks.

Semoga Artikel Ini bermanfaat.
Tautan sumber dan referensi : http://blog.fraser-hart.co.uk/jquery-parallax-scrolling/

Post link : http://www.blognafaro.com/2013/10/membuat-parallax-scrolling-effect-sederhana-untuk-blogger.html