jQuery:图像的滚动效果(包括示例)

时间:2013-11-26 11:47:07

标签: jquery scroll

我想模仿此页面上显示的滚动效果:http://www.google.de/nexus/5/

  1. 图片和文字“Ihre Momente,wie Sie sie ......”有图片,但当鼠标滚动时,图像会在其容器内移动。

  2. 再向下是一部手机(“Alles,是Sie brauchen um festzuhalten,是wirklichzählt”标题)。可以使用滚轮在手机显示屏内上下滚动图像。

  3. 我怎么能实现这样的东西,我不知道从哪里开始。我可以使用jQuery。

    谢谢!

2 个答案:

答案 0 :(得分:2)

对我来说,它看起来像jQuery的Parallax:http://stephband.info/jparallax/

这是另一个实现:http://prinzhorn.github.io/skrollr/

答案 1 :(得分:1)

当我第一次看到这个时,我用Firebug解剖了它,事实证明它非常简单。

当您的滚动到达该点时,包含具有透明中心和白色背景的手机的元素是“位置:固定”,以便它们随您滚动,当您向下滚动页面时,它只是在一堆前面传递图像元素。

虽然它可能不像某些插件那样快速而简单地实现,但这只是检测滚动到哪里并调整一些CSS属性的问题。