Slider with vertical parallax effect

Question

I've created a simple slider for my client to be able to update using Flexslider, and elsewhere on their site they have a vertical scrolling parallax effect. Now they want a slider with vertical scrolling parallax effects...

Here's an example of the desired effect

For my parallax effect I used Parallax.js, which was great when I only needed a single image to have the effect, but not much use now I need the slider to have it.

The above example uses Avia Slider, but the parallax effect appears to be done by something else (as Avia doesn't have any such effect that I can see).

How can I create a simple parallax effect for my existing Flexslider slider (or any other slider)? It seems like it should be a simple effect that doesn't necessarily need a jQuery plugin.

Answer 1

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)');
    }
});