20

I am trying to achieve a scrolling effect using jQuery. I have a background div set to 100% browser window size with overflow hidden. This has a large background image that is approx. 1500px x 2000px.

The effect I want is when the user scrolls down the page the background image moves at a percentage of the scrolled distance, so for every 200px scrolled down the page the image moves 10px in the same direction.

Can anyone point me in the right direction? Is this even possible? : ) Many thanks in advance.

UPDATE

I have since tried variations on the suggestion by @Capt Otis but I'm still struggling the code I am playing around with is as follows:

$(window).scroll(function(){
    if($(this).scrollTop() > 200) {
        $('#div').animate({'background-postion': '+=10px 0'}, 500);
    }
});     

Can anyone shed any light on what I am doing wrong?

Hussein
  • 42,480
  • 25
  • 113
  • 143
mtwallet
  • 5,040
  • 14
  • 50
  • 74

6 Answers6

58

Here you go. Background is set to 10% scroll. You can change the background scroll rate by 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 example at http://jsfiddle.net/Vbtts/
Click this link for the full screen example: http://jsfiddle.net/Vbtts/embedded/result/


Kahlil Lechelt
  • 576
  • 2
  • 11
Hussein
  • 42,480
  • 25
  • 113
  • 143
  • @Hussien tried your suggestion (many thanks!) but not working just yet. I noticed on jsfiddle you're using jQuery UI which I'm not yet. Which part does this depend on, is it position? – mtwallet Feb 21 '11 at 10:12
  • 1
    @mtwallet jQuery UI has nothing to do with the code. You can do without it. It's just a habbit that i include both UI an jQuery when i use jsfiddle. – Hussein Feb 21 '11 at 10:15
  • @Hussien in which case not sure what I'm doing wrong. I've set up my own JSFiddle if you don't mind having a quick look. http://jsfiddle.net/nicklansdell/HFxVj/ – mtwallet Feb 21 '11 at 10:26
  • @mtwallet you need to have `body, html{height:100%; min-height:100%;}` not just body. Check it out here http://jsfiddle.net/HFxVj/2/ – Hussein Feb 21 '11 at 10:33
  • @mtwallet Awesome that works a treat! Thanks a lot for all your help. 50 points coming your way! : ) – mtwallet Feb 21 '11 at 10:39
  • Thank you so much, Hussein. Such a beautiful, simple solution. – Matt Jan 02 '12 at 02:14
  • Probably worth checking out requestAnimationFrame too for smoother animations - here is a good loop i found googling https://gist.github.com/Warry/4254579 – benbyford Dec 14 '17 at 13:34
7

If you don't want to be hassled with the extra background div, here's my code I wrapped 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 required for cross-browser issues. Also replace '1920' with the width of your background image

body{
    background-image:url(images/background.jpg);
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
brz
  • 1,846
  • 21
  • 21
5

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 is the div whose background image I wanted to move. No need to have height: 100% for html, body.

This is a variation for multiple background images.

stormwild
  • 2,855
  • 2
  • 31
  • 38
2

This might do it:

$(window).scroll(function(){
    $('#div').css("background-position",parseInt($(this).scrollTop()*0.05));
})
Gareth
  • 5,693
  • 3
  • 28
  • 37
0

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

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

Your code should look something sort of like this:

$("html").scroll(function{
  var move["bottom"] = $("bg_div").scrollTop();
  $("bg_div").animate({bottom: move}, 500);
});
Community
  • 1
  • 1
Capt Otis
  • 1,250
  • 1
  • 12
  • 18
0

I don't think you can use += or -= when you have two parts in the CSS. There is something you can do, it is a bit tricky 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 number from the background-position of the div (the top position), converts it to int, and increases it by 10. Then it just animates the div to the new position.

Cokegod
  • 8,256
  • 10
  • 29
  • 47
  • Thanks for the reply. I have tried different variations of this code but cannot get it to work I'm afraid. – mtwallet Feb 18 '11 at 15:42