Testing parallax scrolling

by lovromar

HTML

<p>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test...

CSS

body { background: #ddd url('http://lorempixum.com/1200/1200/') no-repeat 50% 0%; }
p { background: hsla(0,0%,100%,.75); border-radius: 5px; margin: 50px auto; padding: 10px; width: 400px; }

JavaScript

// http://forrst.com/posts/Parallax_Scrolling_for_a_background_image-Jh8

$(document).ready(function() {

    $(window).scroll(function() {

        var bgHeight = 1200;

        var documentHeight = $(document).height();

        var windowHeight = $(window).height();

        var offset = $(window).scrollTop();

        

        var maxScroll = documentHeight - windowHeight;

        var percentOffset = offset / maxScroll;

        var percentToPixels = -(bgHeight-windowHeight)*percentOffset;

        

        $('body').css({backgroundPosition: '100% '+percentToPixels+'px'});

    });

});