视差滚动列与不同的缓动

场景: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()它会先跳跃然后动画如果我设置了阻止默认，它就卡住了

花了我一些时间，尝试了不同的方法。我不想要这个复杂的视差。此解决方案不能在IE9中工作，也没有在浏览器之间进行测试(在chrome中有效)。

基于CSS3的过渡时间:0.5s;transition-timing-function: ease-in-out;-意味着当我们要求浏览器更改元素时，浏览器将执行所有动画。因此，我们可以很容易地通过jQuery给出新的相对位置，浏览器会做到这一点。把你的JS放在CSS或Chrome中的问题之后。

<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/

相关内容

最新更新

热门标签：