使用JavaScript滚动时响应动画页面元素[EDIT:Parallax Scrolling]

时间:2012-11-02 18:45:19

标签: javascript html5 css3 parallax

我确信这是过去提出来的;但是我不知所措。

在广场的这个web page上,用户滚动标题为“At Square,不同学科协作设计精美简单的解决方案”的部分。并且动画在页面上的特定点激活到右侧。当用户向后滚动时,图像会恢复,依此类推。他们如何实现这一目标?

2013年8月:因此,自从我提出这个问题以来已经有九个月了,视差滚动刚刚开始运行。我正在附上几个链接,以便进一步阅读这个主题,从如何实现它到为什么要避免它。

视差滚动示例:


教程:


思想:


1 个答案:

答案 0 :(得分:8)

它被称为parallax scrolling

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

请在此处查看深入的探索和教程:http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

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

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