Tom Tom - 1 year ago 134
CSS Question

jQuery to give impression of background scrolling slower

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>

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download