Trying to create an infinite horizontal scroll - p

Question

I am looking to create an effect like that which is used on "The Killers" website: http://www.thekillersmusic.com/html5# . The complexity of the coding of the site is beyond me - but like how it works.

Basically, want something like a horizontal panorama background that I can put web content on. (I've found a great panorama jquery plugin, but it just works like a big image).

Then I found this site: http://unfold.no/ - which seems to have infinite vertical scroll - with exactly the type of functionality I'm looking for - but be damned if I can figure out how they did it. Could they be using the Google Map API somehow? Or have written their own code from scratch?

I'm not very good with jquery so would prefer a plugin I could just tweak, if possible. Any ideas would be greatly appreciated.

Thank you :)

Answer 1

What it appears they're doing on unfold.no is jumping back to the top of the page when you reach the bottom. Since the background is seamless it appears to be an infinite scroll.

Here is a demo I created: http://jsfiddle.net/wdm954/URCwd/4/

Only thing in the jQuery you should have to edit is the first line.

---

By default in the CSS I set the body height to the height of the background image. However in the jQuery I dynamically change this to add the height of the window. This addition height gives it a smooth infinite scroll effect.