A little js library (~8kb, no dependencies) to help you keep track of position, scrolling, and pagination. Nothing too fancy, but since I couldn't find a suitable library for these purposes, I made one for a friend and myself and you too! Ping me @williamngan if you have questions or comments.
Here's a DOM scrolling demo (with some weird iPhone paintings 😆)
Here's a Canvas demo
Simply create a new instance, specifying the viewport size (500px in this example).
var roll = new Roll( 500 );
Next, add a couple of steps to the roll instance. You may use the static helper
Roll.chunk( stepSize, padding ) to create a step object.
roll; // Add a step of 500px with 20px paddingroll; // Add a step of 700px with 20px padding
When the pane is moved, usually via the function
roll.move( position ),
the roll instance will emit a
roll event and possibly a
You can listen to these events in the usual manner. (see EventEmitter docs ). For example,
A common usage is to keep track of scrolling in a DOM element, and then do pagination or animation based on scroll position.
There are a couple of static helpers to simplify this task. First, create a
roll instance using
Roll.DOM( viewportID, scrollpaneID, stepsID, stepClass, padding). For example,
var roll = Roll;
The html structure for a scrolling slideshow may look like this. Also see a sample css that corresponds to that html.
HelloWorldHow's it going
Then this will keep track of vertical scrolling in the #viewport DOM element. You can then listen for the
step events as shown in Basic Usage, and implement your own logic.
One more thing:
Roll.stepHandler(...) is a helper to go through a slideshow with
step event. It will add css classes to the
.step elements based on which step is in view.
In the above snippet,
roll is the roll instance,
views is an array of the .step DOM elements, and
"prev", "next" "curr" are css class names to assign to previous, next, and current step elements.
A good way to get started is to take a look at the demos above, and then check out the source code in demo folder.
npm install to get the dev dependencies,
and then run
gulp to watch and build.