Question

我有一个相对于滚动移动的元素。我使用jQuery：

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

CSS

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

这很好用，但直接移动我的元素而没有任何缓和（延迟）。通过使用css设置转换，我得到了一些我正在寻找的效果，但如果我同时滚动则看起来不太好：

transition: 400ms ease;

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

Answer 1

我自己想通了。问题是css＆＃34; easy＆＃34;。轻松意味着它将开始缓慢并结束缓慢，这将导致滚动激活时始终处于缓慢启动状态。但是如果你使用css＆＃34; easy-out＆＃34;它总是会快速启动并最终减速。所以使用这个：

transition: 400ms ease-out;

如果你想自己定制宽松曲线，可以使用cubic-bezier：

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

Answer 2

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

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

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

视差滚动与缓和

2 个答案: