Trying to create an infinite horizontal scroll - preferably using a jquery plugin

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

Solution

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.

Comments

[heathwaller]

Yes, yes!!! That's exactly what I was looking for - that thing where it reaches the bottom and leaps back to the start. Oh my goodness! Thank you so much for creating it on jsFiddle for me to look over and play with for the horizontally-oriented site I'll need it for. I'm so grateful for your time and efforts towards helping to me achieve my goal.

[heathwaller]

Using wdm's original vertical code I easily changed it to a horizontal endless scroll - and you can find the results here:jsfiddle.net/URCwd/20 - Woohoo! I'm so excited to use this puppy on my project! (Thanks again wdm - this forum community is beyond generous)

[Patareco]

thank you for this I've adapted to horizontal with mousewheel support. I'm not sure if using the native scroll is that good for my purposes but thanks for the code! Edit: jsfiddle.net/patareco/RHKyP/9