具有垂直视差效果的滑块

Question

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

这是所需效果的示例

对于我的视差效果，我使用了Parallax.js ，当我只需要一个图像来产生效果时这很棒，但现在我需要滑块来拥有它并没有多大用处。

上面的例子使用Avia Slider ，但视差效果似乎是由其他东西完成的（因为 Avia 没有任何我能看到的这样的效果）。

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

Answer 1

这是我解决它的方法：

我将transform: translate3d(0,0,0)到滑块元素，然后在用户向下滚动时对其进行修改（例如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)');
    }
});

Answer 2

一种方法是将元素绝对放置。 视差效果应该发生的有效距离必须在overflow: hidden区域。 这意味着，如果你想要一个完全固定的背景，这张图片的宽度必须是width: 100vw 。

然后您所要做的就是触发滚动事件并使用translateX()或通过更改background-image的位置并将该值与实际速度相乘来转换您的图片。 由于滚动事件确实经常触发，并且浏览器不会在每次使用requestAnimationFrame()时重新渲染。

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

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

这里有一个小原型，让你有一个更好的主意。

 $(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>