如何设计像moodi.org,sony.com/be-moved这样的视差网站?

时间:2015-09-04 20:09:13

标签: web parallax

看一下moodi.org,sony.com / be-moved,http://www.spaceneedle.com/home/, 。我怎么能这样做网站?

1 个答案:

答案 0 :(得分:1)

基本上,这一切都是通过检测用户的滚动量并相应地移动来完成的。

你需要一些JavaScript,当然还有html& css实现类似的目标。

JS所做的是它检测用户是否正在滚动,它的方向和速度,然后告诉对象“A”以相反的滚动方向移动,并且还以0.8的速度移动。对象“B”以相反的方向移动,但滚动速度为1.2,所以你会觉得对象“B”更接近你。

这只是一个非常简单的例子。

在触摸代码之前,请记住要有一个好的方案,在编码时,将问题分解成小块并在此处查找, 例如:如何根据客户端scrollTop更改绝对元素的位置? 这就是你将要学习的方式。

有用的链接:

有许多技术,为了使事情变得高效和清洁,您需要熟悉它们以做出最佳决策。 以下是一些可以帮助您开始的链接:

这些只是一些起点,当然你可以找到更多的教程,甚至可以浏览你喜欢的网站的来源,看看他们是如何实现这种效果的。

最后说明:我认为要记住的一件重要事情是不要同时移动多个物体,一旦它们离开视口,停止移动它们,这对于特别是在旧机器上的性能有很大帮助。 jQuery Waypoint是一个方便的工具,在第二个链接中引入。