CODEWITHSUNDEEP
javascript
TCM
TCM

Reputation: 16910

How do i create this effect using 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 :)

Upvotes: 5

Views: 156

Answers (1)

Macmade
Macmade

Reputation: 54049

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.

Upvotes: 4

Related Questions