jQuery Scroll Path is a plugin that lets you define your own custom scroll path. What this means exactly is best understood by checking out the demo. 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.

As of version 1.1, the plugin also allows you to animate the scroll position to a given waypoint in the path.

Are you using jQuery Scroll Path on any of your sites? I'd love to hear about it, and I might include links here for showcasing the plugin being used in the wild.

Using the Plugin

This guide aims to help you with getting started using the plugin. In addition to reading this, it's recommended that you check out the marked section of the script/demo.js file, for a usage example

The Files

To include the plugin on your page, grab the jquery.scrollpath.js file from the script/ folder of this repo, or the minified version. If you want to include the scrollbar, make sure to include the scrollpath.css stylesheet from style/ as well.

Note: This plugin requires jQuery 1.7+

Drawing the Path

To start drawing your path, we need to get the Path object from the plugin. This is done by calling $.fn.scrollPath("getPath");, which returns the object. For anyone who has used canvas before, you can think of the Path object the same way as the canvas context object.

You can also change the default scrolling speeds by adding an object as a parameter with scrollSpeed and rotationSpeed properties set:

var path = $.fn.scrollPath("getPath", {
    scrollSpeed: 80, // Default is 50
    rotationSpeed: Math.PI / 10 // Default is Math.PI / 15
});
// Use the various path drawing methods below on the path variable

Read more:https://github.com/JoelBesada/scrollpath