如何创建基于滚动的视差动画，并在滚动后继续缓解 这种互动的例子

如何解决如何创建基于滚动的视差动画，并在滚动后继续缓解 这种互动的例子

与其说是特定解决方案，不如说这是一个“他们如何做到”的问题。

我访问过一些站点，这些站点在页面元素上具有优雅而自然的缓和效果，这些元素对页面滚动有反应（启动），但在滚动停止后仍会继续（使元素轻松进入停止点）。

查找了“视差”，“滚动”，“缓动”等组合的各种搜索，因此找不到如何获得类似体验的起点。

这种互动的例子

https://la.pizzeriamozza.com/

• 在第一张“ Pizzeria Mozza以其加利福尼亚成分而闻名...”部分的照片中见过，还有卡片的“特殊酒吧”和“页面下方（截至2020年10月3日）。

https://droitthemes.com/wp/oppi-one-page/

• 在英雄标语的设备图像和截屏/ UI图像中看到了“这是您喜欢的食物，已投放”部分（以及页面上的其他元素） ）

在两个站点中，元素似乎都具有动态变化的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的评论-我的问题已解决。对于可能正在寻找类似解决方案的任何人来说，一些关键要点是术语“ 惯性滚动”和“ 动量滚动”（交互性/行为类型我在寻找）。

连同丹特曼的建议：

dixonandmoe.com/rellax 和 min30327.github.io/luxy.js

我发现locomotivemtl.github.io/locomotive-scroll似乎正是我所需要的。

值得一提的是Rellax并没有我一直追求的轻松，但是添加CSS转换过渡为noted here可以使您更加接近。