Question

I’m sorry if this has been asked previously, I really wasn’t sure how to word this question. Here’s one popular example, and another of what I mean, where when the user scrolls down the page and the page itself actually pans over a scene in a fixed path that needn’t be the direction of the scroll at all.

How do these sites work?

Answer 1

While you could write all this code yourself, I’d suggest you use the amazing jQuery Scroll Path.

Read the documentaion. It’s pretty straightforward.

---

Here’s a quote:

The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initializing the plugin.

Scrolling can be done with the mousewheel, up/down arrow keys and spacebar. The spacebar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scrollbar is also included, which allows click and drag scrolling. The scrollbar is enabled by default.

The plugin also allows rotating the entire page, using CSS transforms. This can be done either along a path, or around the current position. In browsers without CSS transform support, all rotations are ignored, but paths are still followed. This means the plugin works with graceful degradation in all browsers.