我一直试图了解他们是如何在http://artofflightmovie.com/中完成这些效果的，到目前为止还没有成功。我甚至不确定要谷歌寻求帮助。任何人都可以对它进行精心设计，并且可能会将链接添加到插件\教程\其他网站上做同样的事情吗？
已经有类似的问题，但它对我没有帮助^^
答案 0 :(得分：6)
到目前为止，所有答案都是现场的，并涵盖了执行的各个部分。约瑟夫关于我们如何包含＆＃39;并且＆＃39;操纵＆＃39;该网站是死的，那些提到jQuery的人准确地描述了我们对它的严重依赖：）
话虽如此，沿着非线性路径移动的另一个概念可能是最困难的部分。我们确实使用了一个Illustrator文件，它被设置为一张方格纸，并绘制了一条贝塞尔路径，反映了我们想要从滚动条移动的运动。然后我们采样＆＃39;下采样＆＃39;通过将曲线转换为表示曲线的一串直线（类似于下采样音频波形）来保持性能/速度高的路径。我们采用这些坐标，将它们交给我们的设计师，他创建了一个巨大的设计文件，并在指定的“停止”位置设计了每个内容部分。点。接下来，我们将沿路径的每个坐标映射到滚动位置的百分比值。我们将这些值存储在JavaScript数组中。最后，我们编写了一些JS函数，我们通过管道滚动位置来确定如何抵消网站“＃container”的定位。 （它基本上是在每个坐标之间，在任何给定的滚动百分比下允许我们非常精细/精确的值）滚动功能由一个高级div处理，它基本上设置我们的文档高度以强制滚动条，我们只是在滚动事件期间读取它的位置，并使用上述功能将容器滑动到应该的位置。
通过应用位置偏移的百分比（我们用于移动容器的东西）并将其应用于各种内容部分的子容器来实现视差效果。这使得子容器比背景移动得更慢或更快，但是在相同的运动路径上。
最后，小型滑雪板和直升机（在某些浏览器中除了x，y运动之外还有CSS3旋转！）通过使用类似于“开始”的数组来定位。并且＆＃39;结束＆＃39;它们之间的位置和补间基于滚动百分比。
我会把它留在那里，以防止它变成一本书，但如果你有兴趣，我很乐意详述具体细节。
完全披露：我是该网站的首席开发人员。我没有张贴到我自己的号角上。或类似的东西，只是为了帮助并为同事提供帮助。我来这里是为了深入挖掘并从别人那里获得洞察力。 （很多，非常感谢那些帮助我们的人！）另外，无耻的插件，但这部电影令人叹为观止...如果你还没有租来它，你会不会感到抱歉。 ：）
答案 1 :(得分：4)
这是一个非常酷的网站;）
基本上使用一些javascript可以检测到一个人滚动了多远。考虑到滚动量，如果他们的位置是绝对的，您可以移动网页的内容。
有几个jQuery插件允许你做类似的东西，虽然我不确定你可以“滚动”一系列坐标。
以下是一些可以帮助您获得类似效果的jQuery插件：
我刚刚选了一对我熟悉的情侣，但有许多相似的插件。
修改
决定为您增添更多类似的网站。
答案 2 :(得分：2)
整个页面是“叠加层” - 全宽和高度包装<div>。类似于模态窗口如何执行它们的“整页阴影”效果并且内部有一个小的div浮动。整个页面内容都在那个包装器中。滚动路径是一个脚本。脚本捕获正文滚动并相应地将div的内容移动到脚本提供的位置。一个足够长的主体可以滚动（由于包装器覆盖了整个页面，因此无法看到），就好像你正在向侧面，向上滚动等。
类比是模态窗口。包装器是整页阴影。模态窗口是内容。并注意模态窗口如何粘在中间？这是使用脚本来计算它的位置，通过相对于页面顶部向下移动模态窗口来保持在中间。但在该网站的案例中，他们向不同的方向发展。
答案 3 :(得分：2)
这似乎并不太复杂。
在jQuery中使用.scroll(function() {})，您可以监听滚动事件。触发后，您可以设置内容div的位置样式（左侧，顶部），以提供侧向移动而不是向下移动的外观。
我猜您overflow:none上需要div属性，以防止用户滚动您不希望他们看到的区域。
在我看来，对于一个笨重的用户界面来说，这听起来很费劲。