Question
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
https://stackoverflow.com/questions/21110869
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianbody { 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>
Solution
I had this problem a month ago. I think it's ok in JSfiddle because the render window is small and it has a simple html code.
As the project I was working on needed to be really smooth / speed with a heavy HTML structure and lots of CSS animations, I had to do that effect from scratch with jQuery just with a simple $(window).scroll() and configuring the top property of my elements (position: absolute).
OTHER TIPS
Don't know if still open but might help: add:
background-attachment:fixed
