Javascript 如何创建基于滚动的视差动画，该动画在滚动后继续轻松播放

这更多的是一个“他们如何做到这一点”的问题，而不是需要一个具体的解决方案

我访问过一些网站，它们的页面元素外观优雅自然，对页面滚动做出反应（启动），但在滚动停止后也会继续（允许元素进入停止点）

在查找了各种“视差”、“滚动”、“放松”等组合的搜索之后，我找不到一个起点来实现类似的体验

这种互动的例子

• 如第一张“Pizzeria Mozza以其加州配料而闻名……”部分的照片所示，以及页面下方“酒吧特色菜”和“红酱晚餐”的卡片所示（截至2020年10月3日）

• 可以在hero banner的设备图像中看到，也可以在“这是您喜爱的食物，交付”部分中看到屏幕截图/UI图像（以及页面上的其他元素）

在这两个站点中，元素似乎都具有动态变化的

transform:translate3d

直接对页面滚动作出反应的样式。但是，这是如何实现和应用的。。。我不知道

我曾尝试查找每个站点中使用的类似组件（通过BuiltWith.com），但没有发现任何有用的东西（对我）

任何洞察都将不胜感激。

.img1{
显示：块；
宽度：100%；
背景：url(https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)不重复；
背景尺寸：封面；
高度：100vh；
背景附件：固定；
}
.img2{
显示：块；
宽度：100%；
背景：url(https://images.pexels.com/photos/1410236/pexels-photo-1410236.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940)不重复；
背景尺寸：封面；
高度：100vh；
背景附件：固定；
}
.img3{
显示：块；
宽度：100%；
背景：url(https://images.pexels.com/photos/2641886/pexels-photo-2641886.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260)不重复；
背景尺寸：封面；
高度：100vh；
背景附件：固定；
}
.color1{
显示：块；
宽度：100%；
高度：100vh；
背景：红色；
}
.color2{
显示：块；
宽度：100%；
高度：100vh；
背景：黑色；
}

---

感谢@dantheman的评论-我的问题解决了。对于任何可能正在寻找类似解决方案的人来说，一些关键要点是术语“惯性卷轴”和“动量卷轴”（我所寻求的互动/行为类型的术语）

以及dantheman的以下建议：

和

我发现这似乎正是我所需要的

---

还值得一提的是，Rellax没有我所寻求的轻松，但添加CSS转换可以让您获得非常接近的效果。

以下是我使用过的几个插件-谢谢@dantheman！而且，仅仅知道“惯性卷轴”和“动量卷轴”这两个术语就完全打开了我的研究领域。再次感谢！感谢您的贡献和代码，@Ishita Ray。视差的东西在这里看起来和工程伟大。最初的要求是提供一个可以增加宽松的组件。我在Luxy.js、Rellax和火车头滚动中找到了我正在探索的解决方案。不过，再次感谢您的善意帮助！