allenskunk
New Member
I've done a bit of research and written a simple bit of jQuery that scrolls the background at a slightly different pace to the foreground, creating a parallaxing effect as you scroll down a website. Unfortunately it's a bit jerky.Here's the basic layout of the HMTL:\[code\]<body> <section> Site content goes here. </section></body>\[/code\]Here's the CSS:\[code\]body { background-image: url('../images/bg.png'); background-repeat: repeat-y; background-position: 50% 0; }\[/code\]Here's the JS:\[code\]$(window).scroll(function () { $("body").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");});\[/code\]Pretty simple, but my problem is that it's a bit jerky when you scroll, even on a powerful computer. Is there a way to make the background parallax animate smoothly?