tags:

views:

61

answers:

2

Hello,

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

A: 

you might wanna check this post:

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

smeg4brains
@smeg: he already specified he wants an effect of line. This part he already knows. Try to focus on left hand side of the page while scrolling. one beautiful line is following the page
Shantanu Gupta
Hi smeg4brains, i know about that. But if you look at the webpage carefully, see the lines, the three lines that run in background and how they animate. I was actually talking about that.
Ankit Rathod
+3  A: 

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.

Macmade
Thanks Macmade, but how does it look like it is animating?
Ankit Rathod
I am not a designer. Please explain me the concept behind it in little detail. How is it animating?
Ankit Rathod
See the edit... : )
Macmade
The effect on this page was really impressive. Thanks for pointing it out.
SAGExSDX