Jquery Parallax Background

Published by Concept Phone Jumat, 20 Juli 2018

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

Sumber https://www.dte.web.id/