[ACCEPTED]-jQuery on window scroll animate background image position-jquery-animate

Here you go. Background is set to 10% scroll. You 4 can change the background scroll rate by 3 changing the 10 in the code.

CSS

html, body{
    height:100%;
    min-height:100%;
    margin:0;
    padding:0;
}
.bg{
    width:100%;
    height:100%;
    background: #fff url(..) no-repeat fixed 0 0;
    overflow:auto;
}

<div class="bg">
   <span>..</span>
</div>

JavaScript

$('.bg').scroll(function() {
    var x = $(this).scrollTop();
    $(this).css('background-position', '0% ' + parseInt(-x / 10) + 'px');
});

Check working 2 example at http://jsfiddle.net/Vbtts/
Click this link for the full 1 screen example: http://jsfiddle.net/Vbtts/embedded/result/

If you don't want to be hassled with the 5 extra background div, here's my code I wrapped 4 up from several examples:

$(window).scroll(function () {
    setBackgroundPosition();
})
$(window).resize(function() {
    setBackgroundPosition();
});
function setBackgroundPosition(){
    $("body").css('background-position', "-" + (1920 - $(window).width()) / 2 + "px " + -(Math.max(document.body.scrollTop, document.documentElement.scrollTop) / 4) + "px");
}

The Math.max is 3 required for cross-browser issues. Also 2 replace '1920' with the width of your background 1 image

body{
    background-image:url(images/background.jpg);
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

This worked for me:

In js:

$(window).scroll(function() {
    var x = $(this).scrollTop();
    $('#main').css('background-position', '100% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 2) + 'px, center top');
});

In css:

#main {
background: url(../img/img1.png) center top no-repeat, url(../img/img2.png) center top no-repeat, url(../img/img3.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-position: right top, left top, center top;

Where #main 4 is the div whose background image I wanted 3 to move. No need to have height: 100% for 2 html, body.

This is a variation for multiple 1 background images.

This might do it:

$(window).scroll(function(){
    $('#div').css("background-position",parseInt($(this).scrollTop()*0.05));
})

0

Look here to see an example of how far the user 6 has scrolled on the page. See the $(this).scrollTop()?

Rather 5 than referencing $(this), try using the 4 background div. Then use a .scroll function 3 to determine how much to move the background.

Your 2 code should look something sort of like 1 this:

$("html").scroll(function{
  var move["bottom"] = $("bg_div").scrollTop();
  $("bg_div").animate({bottom: move}, 500);
});

I don't think you can use += or -= when 7 you have two parts in the CSS. There is 6 something you can do, it is a bit tricky 5 but it works:

$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        var bgpos = $("#div").css("background-position");
        var bgposInt = 0;
        if(bgpos.indexOf("px")!=-1) {
            bgpos = bgpos.substr(bgpos.indexOf("px")+3);
            bgposInt = parseInt(bgpos.substr(0, bgpos.indexOf("px")));
        }
        bgposInt += 10;
        $("#div").animate({"background-position": "0 "+bgposInt+"px"}, 500);
    }
});

This code gets only the second 4 number from the background-position of the 3 div (the top position), converts it to int, and 2 increases it by 10. Then it just animates 1 the div to the new position.