Mecha versi 2.6.4 sudah dirilis!

jQuery Parallax Background

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
  • Pembaharuan: Versi JavaScript Murni 
  • jQuery Paralax 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');
        });
    });

    Lihat Demo

    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...
        };
    })();

    Lihat Demo

    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

    $body.css('background-position', '660px -' + distance + 'px');
    $section.css('background-position', '660px -' + (distance * 2) + 'px');

    Anonim

    Cukup menarik, mungkin bisa menambahkan script smooth scroll biar efek parallax lebih hidup

    Komentar telah ditutup.