具有垂直视差效果的滑块

Question

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

Here's an example of the desired effect

对于我的视差效果，我使用了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>