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.