具有垂直视差效果的滑块

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

Answer 2

One way would be to just place the element absolute. The effective distance the parallax effect should take place has to be in the overflow: hidden area. Which means, if you want a completely fixed background the width of this picture has to be width: 100vw .

Then all you have to do is trigger a scroll event and transform your picture using translateX() or by changing the position of the background-image and multiply the value with the actual speed. Since the scroll event triggers really often and the browser won't rerender every time you could use requestAnimationFrame() .

var translate = function() {
    $('#object').css('transform','translateX('+($(window).scrollTop()*.4)+'px)');
}

$(window).on('scroll', function() {
   window.requestAnimationFrame(translate);
});

Here a little prototype, so you have a better idea.

 $(document).on('ready', function(){ var $outerWrapper = $('#outerWrapper'); var $innerWrapper = $('#innerWrapper'); var $innerWrapperWidth = $innerWrapper.outerWidth(); var $slides = $('.slide'); var slideWidth = $slides.eq(0).outerWidth(); var effective = slideWidth * 0.5; $outerWrapper.on('scroll', function(e){ for (var i = 0; i < $slides.length; i++) { $element = $slides.eq(i); var s = $element.offset().left; if (s < slideWidth && s > 0) { var percent = s/slideWidth; var translate = effective * percent; if ($element.hasClass('parallax')){ $element.css('background-position', '-' + translate +'px 0'); } } } }); });

 .slide{ width: 298px; height: 148px; background-color: #dadada; border: 1px solid #ccc; float: left; background-image: url('http://www.technocrazed.com/wp-content/uploads/2015/12/Landscape-wallpaper-7.jpg'); background-size: 100%; } .slide.parallax{ background-size: 150%; } #innerWrapper{ width: 1500px; height: 150px; } #outerWrapper{ width: 300px; height: 150px; overflow-x: scroll; overflow-y: hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="outerWrapper"> <div id="innerWrapper"> <div class="slide"></div> <div class="slide parallax"></div> <div class="slide"></div> <div class="slide parallax"></div> <div class="slide"></div> </div> </div>