stellar.js - fine in JSFiddle but jerky locally?

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

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

enguerranws · Accepted Answer

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).

stellar.js - fine in JSFiddle but jerky locally?

Answers (2)

Related Questions