Appending A Vertical Scroll To A Horizontal Scroll Bar

I've been trying to do something like this for quite a bit, and have tried a variety of methods from fake scroll bars and DOM-tricking code. Nothing seems to quite be as clean / fu

Solution 1:

You are totally off the right path, no vertical scrollbars are involved.

That is a good site (not the one that you make in 30 minute obviously), and the javascript is obfuscated, but if you are interested, you could watch the source with Firebug to understand what's going on.

It works by mixing a javascript library, some cool CSS3 Transform3D effects, and a nicely studied HTML to give you the effect of the screen scrolling up (actually, only the images are moving - and not scrolling - while the screen is always in the same Y position).

The same effect is used to create the percetion of depth, by moving the houses in background slower than the ones in front.

This effect is called PARALLAX SCROLLING .

A good javascript library you could start looking at for Parallax effects is Stellar.js

You can take a look at some great sites made with Stellar.js, especially Nike and Saucony.

Hope this answer saved you some time,

good luck on your studies ;)

---

EDIT

this is what you want: Jquery Parallax Scrolling effect - Multi directional

open the fiddle from the bounty-awarded answer and keep the right arrow key down.