这更像是一个"他们是如何做到这一点的&；问题，而不是需要一个具体的解决方案。
我访问过一些网站，它们对页面元素有一种优雅而自然的放松感，这些元素对页面滚动做出反应(启动(，但在滚动停止后也会继续(允许元素放松到停止点(。
在查阅了各种搜索以寻找"；视差"滚动"宽松；等等，我找不到如何获得类似体验的起点。
这种交互的示例
https://la.pizzeriamozza.com/
- 在照片中看到的第一个"；披萨店Mozza以其加州食材而闻名"部分以及用于"；Bar Special"；以及"；红酱晚餐"页面下方(截至2020年3月10日(
https://droitthemes.com/wp/oppi-one-page/
- 在英雄横幅的设备图像和"；这是你喜欢的食物；部分(以及页面上的其他元素(
在这两个站点中，元素似乎都有一个动态变化的transform: translate3d直接响应页面滚动的样式。但是，这是如何实现的&应用我不知道。
我试着(通过BuiltWith.com(查找每个网站中使用的类似组件，但没有发现任何有用的东西。
任何见解都值得赞赏。
.img1 {
display: block;
width: 100%;
background: url(https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260) no-repeat;
background-size: cover;
height: 100vh;
background-attachment: fixed;
}
.img2 {
display: block;
width: 100%;
background: url(https://images.pexels.com/photos/1410236/pexels-photo-1410236.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940) no-repeat;
background-size: cover;
height: 100vh;
background-attachment: fixed;
}
.img3 {
display: block;
width: 100%;
background: url(https://images.pexels.com/photos/2641886/pexels-photo-2641886.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260) no-repeat;
background-size: cover;
height: 100vh;
background-attachment: fixed;
}
.color1 {
display: block;
width: 100%;
height: 100vh;
background: red;
}
.color2 {
display: block;
width: 100%;
height: 100vh;
background: black;
}<div class="img1"></div>
<div class="color1"></div>
<div class="img2"></div>
<div class="color2"></div>
<div class="img3"></div>感谢@dantheman的评论-我的问题解决了。对于任何可能正在寻找类似解决方案的人来说，一些关键的收获是术语">惯性滚动"；以及">动量滚动"；(我所寻求的互动/行为类型的术语(。
伴随着dantheman的建议：
dixonandmoe.com/relax和min30327.github.io/luxy.js
我发现motivemtl.github.io/motive-woll似乎正是我所需要的。
值得补充的是，Rellax没有我所寻求的宽松，但添加这里提到的CSS转换转换可以让你非常接近。