2010-06-25 81 views
5

那天我正好访问这个网站: -如何使用javascript创建此效果?

http://www.peter-pearson.com/

谁能告诉我怎样才能创建这个凉爽的效果。我知道如何使用JQuery的localScroll水平或垂直滚动​​页面。但是,如果你已经看过网页,仔细看看这些线条在背景上运行的美妙程度。如果有人能告诉我这种效果是如何创建的,我会非常感激:)

回答

4

PNG与Alpha透明度,在一个背景:
http://www.peter-pearson.com/images/flow5.png
http://www.peter-pearson.com/images/stripey1.jpg

[编辑]

这不是真的一个动画,但一个小技巧,基于透明度。
想象以下HTML:

<div class="div1"> 
    <div class="div2"> 
    </div> 
</div> 

DIV1具有条纹图案的背景图像,定位为固定的,所以当滚动它会移动。
div2具有部分透明背景图像,不是固定的。

所以当你滚动页面时,模式图像会出现在某些地方,因为其他背景图像是透明的,给你一种动画效果。

+0

感谢Macmade,但它看起来像动画? – TCM 2010-06-25 09:28:30

+0

我不是设计师。请详细解释一下它背后的概念。它如何动画? – TCM 2010-06-25 09:29:37

+0

看到编辑...:) – Macmade 2010-06-25 13:15:26

0
+0

他已经指定他想要行的效果。这部分他已经知道了。尝试在滚动时关注页面的左侧。一个美丽的线是在页面 – 2010-06-25 09:22:05

+0

您好smeg4brains,我知道这一点。但是,如果仔细查看网页,请参阅线条,后台运行的三行以及它们的动画效果。我其实在谈论这个。 – TCM 2010-06-25 09:22:30