jQuery to give impression of background scrolling slower

Question

I have the following code which is just about working to give the impression of one div scrolling slower than the other, but there is a problem with the background div jolting a little when scrolling.

Any ideas why this is happening and how I might be able to fix it?

EDIT: This doesn't appear to be a problem in all browsers, so I guess I'm now looking for a safer way of achieving this effect...

http://jsfiddle.net/KRv5V/

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready( function() {
    $(window).scroll(function() {
      var scrollTop = $(window).scrollTop();
      var divam = 1.2;
      $(".sky").css({
          "top":scrollTop/divam+"px",
          "height":10000-(Math.round(scrollTop/divam))+"px"
      });
    });
});
</script>

<style type="text/css">
.sky {
    height:10000px; 
    width:100%; 
    position:absolute; 
    top:0px; 
    left:0px; 
    background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg); 
    z-index:1;
}

.red {
    height:10000px; 
    width:50%; 
    position:absolute; 
    top:0px; 
    right:25%; 
    background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg); 
    z-index:2; 
    background-position:center;
}
</style>

</head>

<body>

<div class="sky"></div>
<div class="red"></div>

</body>

score 3 · Answer 1 · edited Nov 24 '17 at 16:48

I've kind of made a few changes to this myself and got it working smoother as I really don't need all the features in the plugin Oliver Cooper directed me too, although the plugin is probably the better option to allow more scope for future adaption.

Here's my improved code though.

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready( function() {
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        var divam = 20;
        $("body").css({
            "background-position":"0px -"+scrollTop/divam+"px"     
        });
        $(".red").css({
            "margin-top":"-"+scrollTop+"px"
        });
    });
});
</script>

<style type="text/css">
    body {
        background-image:url(http://library.thinkquest.org/06aug/02339/clouds45.jpg);
        background-attachment: fixed;
        height:21000px;
    }

    .red {
        height:10000px; 
        width:50%; 
        position:fixed;
        top:400px;
        left:25%;
        background-image:url(http://www.charting-sustainability.org/writings/culture/red/red-pirate.jpg); 
        background-position:center;
        border-bottom:10px solid #000;
    }
</style>

</head>

<body>

    <div class="sky"></div>
    <div class="red"></div>

</body>

score 2 · Accepted Answer · answered Jan 06 '13 at 22:40

2

You are trying to achieve a 'parallax scrolling' effect. I recommend you take a look at a few articles such as this tutorial and this documentation. If you need any more help just ask, I've made a few site with this design.

answered Jan 06 '13 at 22:40

Oliver Cooper

849
7
20

jQuery to give impression of background scrolling slower

2 Answers2

Linked