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.5s;过渡时间功能：轻松进出; - 意味着每当我们要求浏览器更改元素上的内容时，浏览器都会执行所有动画。所以我们可以轻松地通过jQuery给出新的相对位置，浏览器就可以了。在CSS之后放置您的JS或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/

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

1 个答案: