响应动画页面元素，同时使用JavaScript滚动[编辑：视差滚动] [英] Responsively animate page elements while scrolling using JavaScript [EDIT: Parallax Scrolling]

问题描述

我确信这是在过去提出来的;然而，我有一个任期的损失。

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

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

On this web page for 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?

2013年8月：因此，自我提出这个问题已经九个月了，视差滚动刚刚运行它的过程。

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.

视差滚动示例：

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

教程：

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

思考：

• 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

推荐答案

视差滚动。

他们只是检测

看到一个深入的解释和教程在这里： http://coding.smashingmagazine.com/2011/07 /

See an in-depth explination and tutorial here: http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

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

There is an example and opensource GitHub project here: 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.

这篇关于响应动画页面元素，同时使用JavaScript滚动[编辑：视差滚动]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！