如何使用javascript创建此效果？

Question

The other day i just happened to visit this site :-

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

Can anybody tell me how can i create this cool effect. I know how to horizontally or vertically scroll the page using JQuery's localScroll. But if you have seen the webpage, look carefully how beautifully the lines run over the background. If anybody can tell me how is that effect created i will be very grateful :)

Answer 1

PNG with alpha transparency, over a background:
http://www.peter-pearson.com/images/flow5.png
http://www.peter-pearson.com/images/stripey1.jpg

[EDIT]

It's not really an animation, but a little trick, based on the the transparency.
Imagine the following HTML:

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

div1 has the stripe-pattern background image, positioned as fixed, so it will move when you scroll.
div2 has the partially-transparent background image, not fixed.

So when you scroll the page, the pattern image will appear at some places, because the other background image is transparent, giving you a sort of animation effect.

Answer 2

you might wanna check this post:

http://flesler.blogspot.com/2007/10/jqueryscrollto.html