如何使用javascript创建此效果?

时间:2010-06-25 09:16:32

标签: javascript

前几天我碰巧访问了这个网站: -

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

任何人都可以告诉我如何创造这种很酷的效果。我知道如何使用JQuery的localScroll水平或垂直滚动​​页面。但是,如果您已经看过该网页,请仔细查看线条在背景上的运行情况。如果有人能告诉我这种效果是如何产生的,我将非常感激:)

2 个答案:

答案 0 :(得分: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具有部分透明的背景图像,而不是固定的。

因此,当您滚动页面时,图案图像将出现在某些地方,因为另一个背景图像是透明的,为您提供一种动画效果。

答案 1 :(得分:0)

相关问题