Home/ Questions/Q 9092627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T22:53:09+00:00

I have the following code which is just about working to give the impression

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0