I have just started working with stellar.js (Parallax jQuery library), and it seems pretty easy to use, however it is really jerky/jumpy when you scroll with the mouse wheel (less so when you drag the browser scrollbar manually. Oddly, it is perfectly smooth when uploaded to JSFiddle.
Has anyone encountered this issue before and know what the likely cause could be looking at my code? Please feel free to download the code from JSFiddle and recreate locally to see if you get the same issue, or if you spot anything obvious on my Fiddle, help would be appreciated.
For reference, this problem occurs in Chrome (version 32 here).
CSS
body { background: url(https://www.google.co.uk/images/srpr/logo11w.png) no-repeat; background-size: 100% ; }
section.one { position: relative; border-bottom: 5px solid #000; }
.one .div1 { background: #ccc; width: 200px; height:300px; position: absolute; top: 200px; overflow: hidden; }
.one .div2 { background: #eee; width: 200px; height:200px; position: absolute; top: 100px; left: 100px; }
.one .div3 { background: #aaa; width: 200px; height:200px; position: absolute; top: 100px; left: 150px; }
section.two { position: relative; border-bottom: 5px solid #000; overflow: hidden; }
.two .div1 { background: #ccc; width: 200px; height:300px; position: absolute; top: 200px; }
.two .div2 { background: #eee; width: 200px; height:200px; position: absolute; top: 100px; left: 100px; }
.two .div3 { background: #aaa; width: 200px; height:200px; position: absolute; top: 100px; left: 150px; }
JavaScript/jQuery
$(document).ready(function(){
$.stellar()
});
HTML
<body data-stellar-background-ratio="0.1">
<section class="one">
<div class="div1" data-stellar-ratio="1"></div>
<div class="div2" data-stellar-ratio=".5"></div>
<div class="div3" data-stellar-ratio=".3"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</section>
<section class="two">
<div class="div1" data-stellar-ratio="1"></div>
<div class="div2" data-stellar-ratio=".5"></div>
<div class="div3" data-stellar-ratio=".3"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</section>
</body>
