如何在这些示例中创建滚动的网站内容？

Question

请注意内容如何在这些示例网站上滚动（我与其中任何一个都没有关联，我只是随机找到它们）：

http://www.nikebetterworld.com/
http://www.esetsmartsecurity.com/

就像有两层以不同的速度滚动。我该怎么做这样的网站/内容？

Answer 1

它被称为视差
这是一个jquery插件为它
http://webdev.stephband.info/parallax.html

如何创建视差背景效果
http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/

Answer 2

哇。特别是ESET的页面让我感到惊讶，因为它看起来比耐克更好。

据我所知，他们正在使用各种jQuery插件，如：

• jQuery inView插件 - https://github.com/zuk/jquery.inview
• jQuery scrollTo插件 - http://flesler.blogspot.com/2007/10/jqueryscrollto.html
• jQuery LocalScroll插件 - http://flesler.blogspot.com/2009/03/jquerylocalscroll-127-released.html
• 等

因此，当用户滚动文档时，他们运行javascript并更改元素的不透明度，位置和背景位置。滚动可以手动完成或点击点（使用LocalScroll插件）。

惊人的东西。 +1指出来。

  

虽然类似的方法，耐克使用不同的脚本来完成非常相似的效果。