他们是如何在http://artofflightmovie.com/中完成这些效果的？ [英] How did they do those effects in http://artofflightmovie.com/?
问题描述
我一直试图了解他们是如何在 http://artofflightmovie.com/ 中完成这些效果的到目前为止成功。我甚至不确定要谷歌寻求帮助。任何人都可以对它进行精心设计，并且可能会将插件添加到插件或其他网站上做同样的事情吗？
I have been trying to understand how they did those effects in http://artofflightmovie.com/ with no success so far. I am not even sure what to google for for help. Could any one ellaborate on it and perhaps put links to plugins\tutorials\other websites doing the same thing?
已经有类似的问题，但它对我没有帮助^^
There is already a similar question, but it didn't help me a bit ^^
- Custom scroll bar behavior in Javascript?
推荐答案
到目前为止，这里的所有答案都是现实的，并涵盖了执行的各个部分。约瑟夫关于我们如何包含和操纵网站的帖子已经死了，那些提到jQuery的帖子准确地描述了我们对它的严重依赖：）
All of the answers here so far are spot on and cover various pieces of the execution. Joseph's post about how we 'contained' and 'maneuvered' the site are dead-on, and those mentioning jQuery accurately depict our heavy reliance on it :)
据说，沿着非线性路径移动的另一个概念可能是最困难的部分。我们确实使用了一个Illustrator文件，它被设置为一张方格纸，并绘制了一条贝塞尔路径，反映了我们想要从滚动条移动的运动。然后，我们通过将曲线转换为表示曲线的一串直线（类似于下采样音频波形）来降低采样路径，以保持高性能/速度。我们采用这些坐标，将它们交给我们的设计师，他创建了一个巨大的设计文件，并在指定的停止点设计每个内容部分。接下来，我们将沿路径的每个坐标映射到滚动位置的百分比值。我们将这些值存储在JavaScript数组中。最后，我们编写了一些JS函数，我们通过管道滚动位置来确定如何抵消网站容器的定位。 （它基本上是每个坐标之间的补间，允许我们在任何给定的滚动百分比下得到非常精细/精确的值）滚动功能由一个高级div处理，它基本上设置我们的文档高度以强制滚动条，我们只是读取它的位置滚动事件并使用上述功能将容器滑动到应该的位置。
With that said, the other concept of moving along a non-linear path was probably the most difficult part. We literally used an Illustrator file that was setup like a piece of graph paper and drew a bezier path that reflected the movement we wanted from the scrollbar. Then we 'downsampled' the path by converting the curved lines into a bunch of straight lines that represented the curve (similar to downsampling audio waveforms) to keep performance/speed high. We took those coordinates, gave them to our designer, and he created a gigantic design file and literally designed each content section at the designated 'stop' points. Next we mapped each coordinate along the path to a percentage value of the scroll position. We stored these values in a JavaScript array. Lastly we wrote some JS functions that we pipe the scroll position through to determine how to offset the positioning of the site 'container'. (It basically 'tweens' between each coordinate allowing us very fine/precise values at any given scroll percentage) The scroll functionality is handled by a tall div that basically sets our document height to force a scrollbar, and we just read it's position during a Scroll Event and slide the container around to where it should be using the above mentioned functions.
通过应用位置偏移的百分比来实现视差效果（我们使用的是什么）移动容器并将其应用于各种内容部分的子容器。这使得子容器比背景移动得更慢或更快，但是在相同的运动路径上。
The parallax effect is achieved by applying a percentage of the position offset (what we use to move the container around) and applying it to the sub-containers of the various content sections. This makes the subcontainers move slower or faster than the background, but on the same motion path.
最后，小型滑雪板和直升机（除x外还有CSS3旋转） ，某些浏览器中的y移动！）通过使用开始和结束位置的类似数组来定位，并根据滚动百分比在它们之间进行补间。
Lastly, the little snowboarders and helicopters (which have CSS3 rotations in addition to x,y movement in some browsers!) are positioned by using a simliar array of 'start' and 'end' positions and tweening between them based on the scroll percentage.
I我会把它留在那里，以防止它变成一本书，但如果你有兴趣，我很乐意详细说明具体细节。
I'll leave it at that to keep this from turning into a book, but I'd be happy to elaborate on specifics if you're interested.
Full披露：我是该网站的首席开发人员。我不是要张贴'自己的角'或类似的东西，只是为了帮助并为同事提供帮助。我来这里是为了深入挖掘并从别人那里获得洞察力。 （很多，非常感谢那些帮助我们的人！）另外，无耻的插头，但电影令人叹为观止...如果你还没有租用它，你不会后悔。 ：）
Full disclosure: I was lead developer on the site. I'm not posting to 'toot my own horn' or anything like that, just to be helpful and provide assistance to a fellow tinkerer. I come here a lot to dig through and get insight from others. (many, many thanks to those who have helped us!) Also, shameless plug, but the film is breath-taking... go rent it if you haven't yet, you won't be sorry. :)
这篇关于他们是如何在http://artofflightmovie.com/中完成这些效果的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
