jQuery Parallax Background
HTML
<section> ... </section>
CSS
body {
background:black url('img/bg-1.png') repeat-y 0 0;
margin:0 0;
padding:0 0;
}
section {
background:transparent url('img/bg-2.png') repeat-y 0 0;
padding:50px;
}
jQuery
$(function() {
var $window = $(window),
$body = $('body'),
$section = $('section');
$window.on("scroll", function() {
var distance = $(this).scrollTop();
$body.css('background-position', '0 -' + distance + 'px');
$section.css('background-position', '0 -' + distance * 2 + 'px');
});
});
Pembaharuan: Versi JavaScript Murni
Menggunakan pageYOffset
sebagai pengganti $(window).scrollTop()
:
(function() {
var bgLayer = document.getElementsByTagName('div');
window.onscroll = function() {
var top = pageYOffset;
document.body.style.backgroundPosition = '0 ' + (top*2) + 'px';
bgLayer[0].style.backgroundPosition = '0 ' + (top*0.5) + 'px';
bgLayer[1].style.backgroundPosition = '0 ' + (top*1.5) + 'px';
// Dan seterusnya...
};
})();
Labels: JavaScript, jQuery, Potongan
10 Comments:
fungsinya buat apa mas? ga ada penjelasannya :(
Bedanya ama background biasa apa, Mas? :\
bangbungg & MUX: Coba gulung layarnya pelan-pelan dan perhatikan efek gerakan latar di bagian samping kanan :)
oh ngerti2 background yang hitamnya lebih lambat saat di scroll :o
dari blogku nih paralax scroll kayaknya haha :D
liat nih mas bayu, terasa lebih smooth..
Kelihatannya kasar, soalnya ukuran background yang Saya pakai kecil. Kalau ukuran background diperbesar hasilnya akan lebih halus ⇒ http://jsfiddle.net/tovic/ZNZUM/4/
Selain itu, arah paralax di blogmu terbalik. Mungkin itu cuma gaya, tapi Saya lebih suka yang natural :)
kalau gambarnya ingin diatur posisi nya bagaimana mas,
supaya berada dikanan,
soalnya aku sudah mencoba mengatur posisi nya pada background:transparent url('img/bg-2.png') repeat-y 0 0; menjadi background:transparent url('img/bg-2.png') repeat-y 660px 0; namun ketika scroll aku turunkan kebawah, posisinya kembali lagi ke pojok kiri.
$body.css('background-position', '660px -' + distance + 'px');
$section.css('background-position', '660px -' + (distance * 2) + 'px');
terima kasih
Cukup menarik, mungkin bisa menambahkan script smooth scroll biar efek parallax lebih hidup
Post a Comment
<< Home