javascript - 具有垂直视差效果的 slider

Question

我为我的客户创建了一个简单的 slider ，以便能够使用 Flexslider 进行更新，并且在其网站的其他地方有垂直滚动视差效果。现在他们想要一个具有垂直滚动视差效果的 slider ......

Here's an example of the desired effect

对于我的视差效果，我使用 Parallax.js ，当我只需要一张图像来实现效果时，这非常棒，但现在没有多大用处，我需要 slider 来实现它。

上面的示例使用 Avia Slider ，但视差效果似乎是由其他东西完成的(因为 Avia 没有我能看到的任何此类效果)。

如何为现有的 Flexslider slider (或任何其他 slider )创建简单的视差效果？看起来应该是一个简单的效果，不一定需要 jQuery 插件。

Answer 1

这是我解决这个问题的方法:

我将 transform:translate3d(0,0,0) 添加到 slider 元素，然后在用户向下滚动时对其进行修改(例如 transform:translate3d(0,10px, 0))。一个简单、干净的解决方案:

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