Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do i create this effect using javascript?

Tags:

javascript

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 :)

like image 870
TCM Avatar asked Oct 15 '22 03:10

TCM


1 Answers

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.

like image 156
Macmade Avatar answered Oct 24 '22 22:10

Macmade