我一直在努力了解他们是如何在 http://artofflightmovie.com/ 中实现这些效果的到目前为止没有成功。我什至不确定要用谷歌搜索什么来寻求帮助。任何人都可以对此进行详细说明，并且可能会链接到插件\教程\其他做同样事情的网站吗？
已经有类似的问题了，不过对我一点帮助都没有^^
最佳答案
到目前为止，这里的所有答案都是正确的，涵盖了执行的各个部分。 Joseph 关于我们如何“控制”和“操纵”该网站的帖子是正确的，那些提到 jQuery 的人准确地描述了我们对它的严重依赖:)
话虽如此，沿着非线性路径移动的另一个概念可能是最困难的部分。我们实际上使用了一个 Illustrator 文件，它被设置成一张方格纸，并绘制了一条贝塞尔曲线路径来反射(reflect)我们想要的滚动条移动。然后我们通过将曲线转换为代表曲线的一堆直线(类似于音频波形的下采样)来“下采样”路径，以保持较高的性能/速度。我们获取了这些坐标，将它们提供给我们的设计师，他创建了一个巨大的设计文件，并在指定的“停止”点逐字设计了每个内容部分。接下来，我们将沿路径的每个坐标映射到滚动位置的百分比值。我们将这些值存储在一个 JavaScript 数组中。最后，我们编写了一些 JS 函数，我们通过管道滚动位置来确定如何偏移站点“容器”的定位。 (它基本上在每个坐标之间“补间”，允许我们在任何给定的滚动百分比下获得非常精细/精确的值)滚动功能由一个高大的 div 处理，它基本上设置我们的文档高度以强制滚动条，我们只是在一个过程中读取它的位置滚动事件并将容器滑动到它应该使用上述功能的位置。
视差效果是通过应用一定百分比的位置偏移(我们用来移动容器的)并将其应用于各个内容部分的子容器来实现的。这使得子容器比背景移动得更慢或更快，但在相同的运动路径上。
最后，小滑雪板和直升机(在某些浏览器中除了 x,y 移动之外还具有 CSS3 旋转!)通过使用类似的“开始”和“结束”位置数组并根据滚动百分比。
为了避免将其变成一本书，我会把它留在那儿，但如果您有兴趣，我很乐意详细说明细节。
全面披露:我是该网站的首席开发人员。我发帖不是为了“吹响我自己的号 Angular ”或类似的东西，只是为了提供帮助并为其他修补匠提供帮助。我经常来这里挖掘并从其他人那里获得见解。 (非常非常感谢那些帮助过我们的人!) 还有，无耻的塞子，但是这部电影令人叹为观止......如果你还没有去租它，你不会后悔的。 :)
关于javascript - 他们是如何在 http ://artofflightmovie. com/中实现这些效果的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8923136/