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...
};
})();
10 Komentar
Anonim
fungsinya buat apa mas? ga ada penjelasannya :(
MUX SPARROW
Bedanya ama background biasa apa, Mas? :\
Taufik Nurrohman
bangbungg & MUX: Coba gulung layarnya pelan-pelan dan perhatikan efek gerakan latar di bagian samping kanan :)
Anonim
oh ngerti2 background yang hitamnya lebih lambat saat di scroll :o
Putra
dari blogku nih paralax scroll kayaknya haha :D
liat nih mas bayu, terasa lebih smooth..
Taufik Nurrohman
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 :)
Unknown
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.
Taufik Nurrohman
Unknown
terima kasih
Anonim
Cukup menarik, mungkin bisa menambahkan script smooth scroll biar efek parallax lebih hidup