How can I achieve this "scrolling dynamic page" effect?

I have recently stumbled upon more and more of those "scrolling dynamic pages" (I don't know what they're exactly called...)

This one is a good example: http://www.archeage.com/en

Apple also uses this design for their new iPhones: http://www.apple.com/iphone-5c/ and http://www.apple.com/iphone-5s/

Does anyone have an idea what those types of websites are called and how one could easily replicate them? (i.e. an available Template).

Thank you very much in advance

Can't post links yet but search for onepagescroll.js

but the loading time will be high at the start.

This is referred to as Parallax, you can achieve a nice scrolling presentation with this kind of design.

A paragraph from wiki: Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines.

Keep in mind you may end up with a slow loading site specially if it's going to be image heavy. Works alright if you use as a landing page, one page presentation or something of that sort. Likely not the best for an ecommerce site.

Search for neomam 13reasons as an example, a nice infographic presentation that gives it an interactive feeling.


If you are using worpress themeforest and mojothemes for instance have them.


There are also a few free ones. A quick search shows bragthemes got one.


webdesign tutsplus has a neat tutorial and a downloadable demo.

I have one site with parallax - it's pretty cool but obviously some (lots) of thought needs to go into it.

The theme I have it on is Coffee & Cream from Themeforest which is a hybrid 'one page'/flat/multi page/large text design (if that makes sense).

Well worth looking into as the author is one of the rare ones who listens to feedback and acts on it.

(no connection to the author BTW)

krieg above nailed it, listen to him.

My .2 cents:
1) Parallax sites are great for presentation (when design is the most importat)
2) For SEO / ecommerce / sales ... forget it. Parallax is NOT the way to go.
3) For mobile .. also forget it. You can make a responsive version, sure, but heavy JavaScript almost kills most phone browsers and most of this sites are not touch friendly. Even most older computers have trouble displaying them.