jquery - 具有不同缓动的视差滚动列

Question

场景: 3 列，中间一列有不同的缓动。 在鼠标滚轮上翻译 - 平滑(在 iOS 上看起来像惯性)。

我在这里找到了这个例子: http://www.benoitchalland.com/projects

但不知道如何自己从头开始构建它。

有什么想法吗？

注意:要查看效果，请滚动直到看到带有图像的 3 列。

我试过了

 $window.on("mousewheel DOMMouseScroll", function(event){
 // event.preventDefault();
 var scrollTop = $window.scrollTop();
     $(".center").css({
         "-webkit-transform": "translate3d(0,-" + scrollTop  + "px,0)",
         "-moz-transform": "translate3d(0,-" + scrollTop  + "px,0)"
     });
});


.center {
    -webkit-transition: all 800ms linear;
    -moz-transition: all 800ms linear;
    -o-transition: all 800ms linear;
    transition: all 800ms linear;
}

但如果我不 prevendDefault() 它会先跳转然后动画，如果我阻止默认，它就会卡住。

Answer 1

我花了一些时间尝试不同的方法。我不想要这个复杂的视差东西。此解决方案不适用于 IE9，并且未在浏览器之间进行测试(适用于 chrome)。

基于 CSS3 过渡持续时间:0.5 秒；过渡计时功能:缓入缓出； - 意味着每当我们要求浏览器更改元素上的某些内容时，浏览器将执行所有动画。所以我们可以很容易地通过 jQuery 给出新的相对位置，浏览器会完成这个任务。将您的 JS 放在 CSS 或 Chrome 中的问题之后。在这里和那里调整。

HTML

<div class="tall">
  <div class="container">
    <div class="column" data-speed="slow"></div>
    <div class="column" data-speed="fast"></div>
    <div class="column" data-speed="slow"></div>
  </div>
</div>

CSS

.container {
  position: fixed;
}
.column {
  background-color: red;
  position: relative;
  top: 0;
  height: 400px;
  width: 200px;
  margin: 10px;
  float: left;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}

JS

$(document).ready(function() {
  // Setup some vars on start
  // you can define more speeds here
  var speeds = {
    'slow': 0.5,
    'fast': 1
  };
  var noColumns = $('.column').length;
  // this contains column properties to be used later
  var columns = new Array();
  for (var i = 0; i < noColumns; i++) {
    columns.push({
      columnHeight: parseInt($('.column').eq(i).css('height')),
      position: 0,
      speed: speeds[$('.column').eq(i).attr('data-speed')]
    });
  }
  var previousScroll = $(this).scrollTop();
  var conHeight = parseInt($('.column').eq(0).css('height')) * 2;
  // We need to extend main div, to have scrolling bar active for all elements in column
  $('.tall').css('height', conHeight + 'px');
  $(window).on('scroll', function(event) {
    // Do the magic
    var shift = $(this).scrollTop() - previousScroll;
    previousScroll = $(this).scrollTop();
    for (var i = 0; i < noColumns; i++) {
      columns[i].position -= shift * columns[i].speed;
      $('.column').eq(i).css('top', columns[i].position + 'px');
    }
  });
});

演示 - https://jsfiddle.net/dony190h/1/