gseilheimer / Pageable

Create full page scrolling web pages. No jQuery.

Pageable

Pageable transforms a web page into a full page scrolling presentation.

• Lightweight (less than 3kb g-zipped)
• Responsive
• Performant
• Easy to set up

---

Demos

• Playground
• Fun with real-time orientation
• Fun with delays

---

Install

npm

npm install pageable --save

---

Browser

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.

---

Set up

Define a container element that has at least one descendant element with the data-anchor attribute.

HTML

<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:

JS

new Pageable("#container");

---

You can pass an object as the second paramater to customise the instance:

JS

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
    },
});

---

Methods

next()

Scroll to next page.

pageable.next();

prev()

Scroll to previous page.

pageable.prev();

scrollToPage()

Scroll to defined page number.

pageable.scrollToPage(3);

scrollToAnchor()

Scroll to defined anchor.

pageable.scrollToAnchor("#myanchor");

orientate()

Orientate the instance to either vertical or horizontal.

pageable.orientate("horizontal");

---

Copyright © 2018 Karl Saunders | BSD & MIT license