html5 & CSS3?

[webstudent123]

I am hoping someone can tell me the fundamental technique behind pages like this one: http://www.vondutch.com/
(backgrounds moving at different speeds)

Or what is the 'style' name of these types of pages?

Thanks!

 

[Roddy]

Scroll any which way you want!

http://demos.flesler.com/jquery/scrollTo/

 

[ronaldroe]

It's a surprisingly simple technique called parallax. It uses CSS3 multiple backgrounds, set at varying positions with percentages to make the effect. Here's a snippet from a site I did recently that should help illustrate:

body{
	background:url('images/small.png') -30% top repeat-x, 
		        url('images/medium.png') -12% top repeat-x, 
		        url('images/large.png') -5% top repeat-x;
	background-color:#111;
}

Basically, you have a comma-separated list of backgrounds. In this case, I had a bokeh-like effect that shifted at differing rates on the horizontal (in most cases, you'd want it to repeat on the vertical). The negative, percentage-based position values are where the magic happens.

 

[webstudent123]

Thanks Roe!

That is exactly the info I was looking for.