使用 JavaScript 滚动时响应式动画页面元素 [编辑：视差滚动]

我确信这个问题过去曾被提起过；然而我对一个术语不知所措。

On this web page https://squareup.com/careers/creative对于 square，用户滚动浏览标题为“在 Square，不同学科协作设计精美简单的解决方案”的部分。并且动画在页面上特定点的右侧被激活。当用户向后滚动时，图像会恢复，等等。他们是如何实现这一目标的？

2013 年 8 月：自从我问这个问题以来已经九个月了，视差滚动已经快要顺其自然了。我附上了几个链接，以便进一步阅读该主题，从如何实现它到为什么要避免它。

视差滚动的示例：

• http://en.wikipedia.org/wiki/Parallax_scrolling http://en.wikipedia.org/wiki/Parallax_scrolling
• http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html
• http://www.cloudberrycreative.com/blog/6-sites-that-get-parallax-scrolling-right/ http://www.cloudberrycreative.com/blog/6-sites-that-get-parallax-scrolling-right/

教程：

• http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/ http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/
• http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/ http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
• http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/ http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
• http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/ http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

想法：

• http://curveagency.com/blog/parallax-scrolling-good-bad-and-questionable http://curveagency.com/blog/parallax-scrolling-good-bad-and-questionable
• http://teamhardison.com/wordpress-for-real-estate/parallax-scrolling-really-do-have/ http://teamhardison.com/wordpress-for-real-estate/parallax-scrolling-really-do-have/
• http://www.monolithdoes.com/parallax-scrolling-why-or-why-not/ http://www.monolithdoes.com/parallax-scrolling-why-or-why-not/
• http://www.quora.com/search?q=parallax+scrolling http://www.quora.com/search?q=parallax+scrolling

它被称为视差滚动 http://en.wikipedia.org/wiki/Parallax_scrolling.

他们只是检测窗口位置，然后在窗口滚动到他们设置的任何点时应用 jquery 动画。

请参阅此处的深入解释和教程：http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/ http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

这里有一个示例和开源 GitHub 项目：http://prinzhorn.github.com/skrollr/ http://prinzhorn.github.com/skrollr/

在我看来，这通常是糟糕的设计。我认为它可以很微妙并且做得很好，但它常常会毫无意义地分散注意力。