Pageable transforms a web page into a full page scrolling presentation.
- Lightweight (less than 3kb g-zipped)
- Responsive
- Performant
- Easy to set up
npm install pageable --save
Grab the file from one of the CDNs and include it in your page:
https://unpkg.com/pageable@latest/dist/pageable.js
You can replace latest
with the required release number if needed.
Define a container element that has at least one descendant element with the data-anchor
attribute.
<div id="container">
<div data-anchor="Page 1"></div>
<div data-anchor="Page 2"></div>
<div data-anchor="Page 3"></div>
<div data-anchor="Page 4"></div>
....
</div>
Instantiate Pageable and pass a reference to the container in the constructor:
new Pageable("#container");
You can pass an object as the second paramater to customise the instance:
new Pageable("#container", {
pips: true, // display the pips
interval: 300, // the duration in ms of the scroll animation
delay: 0, // the delay in ms before the scroll animation starts
throttle: 50, // the interval in ms that the resize callback is fired
orientation: "vertical", // or horizontal
easing: function(currentTime, startPos, endPos, interval) {
// the easing function used for the scroll animation
return -endPos * (currentTime /= interval) * (currentTime - 2) + startPos;
},
onInit: function() {
// do something when the instance is ready
},
onBeforeStart: function() {
// do something before scrolling begins
},
onStart: function() {
// do something when scrolling begins
},
onScroll: function() {
// do something during scroll
},
onFinish: function() {
// do something when scrolling ends
},
});
Scroll to next page.
pageable.next();
Scroll to previous page.
pageable.prev();
Scroll to defined page number.
pageable.scrollToPage(3);
Scroll to defined anchor.
pageable.scrollToAnchor("#myanchor");
Orientate the instance to either vertical or horizontal.
pageable.orientate("horizontal");
Copyright © 2018 Karl Saunders | BSD & MIT license