使用 JavaScript 滚动时响应性地为页面元素设置动画[编辑：视差滚动]

Responsively animate page elements while scrolling using JavaScript [EDIT: Parallax Scrolling]

提问by Ryan Rich

I'm certain this has been brought up in the past; however I'm at a loss for a term.

我敢肯定这在过去已经提出过；但是我不知所措。

On this web pagefor square, the user scrolls through the section titled "At Square, different disciplines collaborate to design beautifully simple solutions."and the animation is activated to the right at that specific point on the page. As the user scrolls back the image reverts and so on. How are they achieving this?

在Square 的这个网页上，用户滚动浏览标题为“在 Square，不同学科合作设计精美简单的解决方案”的部分。动画会在页面上的特定点向右激活。当用户向后滚动时，图像会恢复，依此类推。他们是如何实现这一目标的？

AUG 2013:So it's been nine months since I've asked this question and parallax scrolling has just about run it's course. I'm attaching several links for further reading on this subject ranging from how to achieve it to why to avoid it.

2013 年 8 月：我问这个问题已经九个月了，视差滚动刚刚开始。我附上了几个链接，以供进一步阅读这个主题，从如何实现它到为什么要避免它。

Examples of parallax scrolling:

视差滚动示例：

---

---

• http://en.wikipedia.org/wiki/Parallax_scrolling
• 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://en.wikipedia.org/wiki/Parallax_scrolling
• 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/

Tutorials:

教程：

---

---

• 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://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://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://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/

Thoughts:

想法：

---

---

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

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

回答by Justin

It is called parallax scrolling.

它被称为视差滚动。

They just detect the window position and then apply a jquery animation when the window is scrolled to whatever points they set.

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

See an in-depth explination and tutorial here: 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/

There is an example and opensource GitHub project here: http://prinzhorn.github.com/skrollr/

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

In my opinion it is normally bad design. I suppose it can be subtle and done well but it often is distracting for no real purpose.

在我看来，这通常是糟糕的设计。我想它可以很微妙并且做得很好，但它通常没有真正的目的而分散注意力。