带有缓动的视差滚动答案

【问题标题】：Parallax scroll with easing带有缓动的视差滚动
【发布时间】：2016-09-08 10:53:38
【问题描述】：

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

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

CSS

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

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

transition: 400ms ease;

是否有可能以更优雅的方式顺利完成此操作？

【问题讨论】：

嗨。当我试图弄清楚如何在本网站adamunderwear.com 上滚动时，我发现了你的问题，但你的解决方案对我不起作用:(我想知道你是否有任何其他建议。

标签： javascript jquery css

【解决方案1】：

我自己想出来的。问题是css“轻松”。轻松意味着它将开始缓慢并缓慢结束，这将导致在滚动处于活动状态时它将始终处于缓慢启动状态。但是，如果您使用 css “ease-out”，它总是会快速启动并最终变慢。所以用这个：

transition: 400ms ease-out;

如果您想自己自定义缓动曲线，也可以使用三次贝塞尔曲线：

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

【讨论】：

【解决方案2】：

在制作视差效果时，您将在每个触发的滚动事件上设置一个新的translateY()。事件触发非常频繁，通常不需要转换。如果您仍然遇到糟糕的渲染，可能是因为浏览器没有在每个事件上都渲染。您可以使用requestAnimationFrame 强制浏览器这样做。

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

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

【讨论】：

感谢您的评论，但没有区别。我使用 css 过渡时的问题是动画仅在我停止滚动后才开始。而且你说不需要过渡，重点是我想要顺利/轻松地完成它。但当然不必使用转换。
动画在您停止滚动后开始？我不明白你的目标是什么。视差是不同层的不同滚动速度。
抱歉造成混淆。但我不确定你是否理解我想要完成的任务。使用提供的代码（没有过渡）一切正常 - 但它没有缓和。我想要完成的一个例子：apple.com/tv。滚动后，您可以设置白框移动滚动方向。这就像一个延迟，这就是我正在寻找的。span>