单个元素/ div标签的HTML5 / Javascript视差效果?

时间:2012-08-17 15:45:39

标签: javascript jquery html5 scroll parallax

我在过去创建了一些网站,其中scrolldeck.js具有标准的全屏幕背景,其中有一层ontop和text(标准滚动视差样式),这不是我想要的。

我正在寻找一个脚本或教程(或示例),以便在滚动时在前景中设置单个div标签(图像)动画/移动。我将在一个页面的垂直滚动网站上使用它,所以当您滚动我希望奇怪的图像以不同的速度滚动并具有开始和停止位置。我不想要视差的整个背景。

提前感谢一堆


编辑:这是我正在寻找的更好的解释:

图片向下滚动页面,当您滚动时,您会看到一个漂浮的瓶子(透明的png),您继续向下滚动阅读内容,并且在某个时刻,瓶子可以很好地放在桌子上(背景的一部分)滚动它将不再移动。

很好的目标是让元素(图像)移动到预先确定的位置(基于滚动),然后在它们到达最终静止位置时保持放置。


编辑2:以下是一些示例网站:
http://jessandruss.us/ - 此网站完全按照我想要的方式完成了目前的2/3:see screenshot
http://smokeybones.com/ - 汉堡很好地完成了我想要的效果,最小但是当你滚动时它会移动到位。

5 个答案:

答案 0 :(得分:6)

根据你的评论 but hopefully at a different pace then the actual page scrolls creating a parallax effect. - 我试图模拟这种效果。

基本上,移动物体以相同的速率行进,页面滚动但覆盖与视口(可见区域)成比例的不同距离

DEMO here.

注意:使用滚动条手柄代替鼠标滚轮。

答案 1 :(得分:6)

http://prinzhorn.github.com/skrollr/

这个库是一个原生的javascript(不需要jQuery等)视差滚动插件。插件主页有一个您正在寻找的实际演示。 Github回购是here

答案 2 :(得分:1)

你应该看一下https://victoriabeckham.landrover.com/INT的来源 基本上是一个“玩家”,可以处理一些css属性,提供你想要实现的视差效果;主要是背景位置问题 alla应该有这种治疗的元素是a

答案 3 :(得分:0)

我认为你会从本书中受益:Supercharged Javascript Graphics它有很多教程和有用的信息。我个人从中学到了很多东西。这里有一个链接到本书中的一个例子,以满足你的胃口here.,你可以访问作者的网站,了解更多很酷的东西here.

答案 4 :(得分:0)

给jQuery Transe一个机会..有一些超级简单的 demos (还没有文档),它甚至可以与touch devices一起使用。 但是,我要说,这是一个早期测试版,所以要小心。

BTW:它只有8.682 kb