缓动的视差滚动

我有一个相对滚动的元素。我使用jQuery这个：缓动的视差滚动

$('#object').css('transform','translateY('+($(window).scrollTop()*.4)+'px)');

CSS

#object { 
    width:200px; 
    top:100%; 
    left:50%; 
    position:absolute; 
}

这种运作良好，而是直接没有任何宽松措施（延迟）移动我的元素。通过使用CSS，我得到一些我要找的作用，但看起来并不好，如果我滚动在同一时间设置过渡：

transition: 400ms ease;

是否有可能做到这一点顺利，但以更优雅的方式？

来源

2016-09-08 Rasmus

我自己想通了。问题在于css“轻松”。 Ease意味着它将开始缓慢并结束缓慢，这将导致在滚动处于活动状态时它始终处于缓慢启动状态。但是，如果您使用css“缓出”，它总是会以最快的速度开始并减速。如果你想定制缓和曲线自己

transition: 400ms ease-out;

或者立方贝塞尔：

transition: 400ms cubic-bezier(0.235, 0.615, 0.185, 0.995);

来源

2016-09-09 06:45:44 Rasmus

当做视差效果时，您将在触发的每个滚动事件上设置一个新的translateY()。该事件经常触发，通常不需要转换。如果您仍然遇到渲染错误，可能是因为浏览器不会在每个事件上渲染。您可以使用requestAnimationFrame强制浏览器执行此操作。

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

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

来源

2016-09-08 11:15:48

感谢评论，但没有差异所以用这个。当我使用css转换时，问题是只有在停止滚动后才开始动画。而你说不应该没有必要进行过渡，整个问题就是我想要顺利/轻松地做到这一点。但当然不必使用转换。停止滚动后开始动画 – Rasmus

？我不明白你的目标是什么。视差是不同层的滚动速度。 –

对不起，让人困惑。但我不确定你明白我想完成什么。使用提供的代码（无需转换），一切正常 - 但不会松动。我想完成的一个例子：http://www.apple.com/tv/。滚动后，您可以选择白框移动滚动的方向。这就像一个延迟，这就是我正在寻找的。 – Rasmus

缓动的视差滚动

回答

相关问题