javascript – 具有缓动的视差滚动

2023年5月10日 231次阅读

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

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

CSS

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

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

transition: 400ms ease;

是否有可能顺利完成,但是更优雅？

最佳答案 我自己想通了.问题是css“缓和”.轻松意味着它将开始缓慢并结束缓慢,这将导致滚动激活时始终处于缓慢启动状态.但是,如果你使用css“缓出”它将始终快速启动并最终减速.所以使用这个：

transition: 400ms ease-out;

或者如果你想自己定制缓和曲线,则为cubic-bezier：

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