[chuck-le-butt]

Here’s how I solved it:

I added transform: translate3d(0,0,0) to the slider element, and then modified it as the user scrolls down (eg. transform: translate3d(0,10px,0)). A simple, clean solution:

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {

        var parallaxDistance = ($(window).scrollTop()/2), 
            parallaxCSS = "translate3d(0, "+ parallaxDistance +"px , 0)";

        $('.slides').css('transform', parallaxCSS);

    } else {

        $('.slides').css('transform', 'translate3d(0, 0, 0)');
    }
});

[Author]

Posts