Fullscreen Scrolling Presentation In JavaScript – Pageable

Category: Animation , Javascript | September 17, 2018
Author: Mobius1
Views Total: 246
Official Page: Go to website
Last Update: September 17, 2018
License: MIT

Preview:

Fullscreen Scrolling Presentation In JavaScript – Pageable

Description:

Pageable is a lightweight JavaScript library to generate a fullscreen scrolling presentation where the users are allowed to scroll through sectioned pages with drag, swipe, and mouse wheel events.

Supports both horizontal and vertical scrolling.

How to use it:

Import the main JavaScript file ‘pageable.js’ into the document.

<script src="js/pageable.js"></script>

Split your webpage into several sections with unique names using the ‘data-anchor’ attribute.

<main id="example">
  <section data-anchor="Page 1">
    Section 1
  </section>
  <section data-anchor="Page 2">
    Section 2
  </section>
  <section data-anchor="Page 3">
    Section 3
  </section>
  <section data-anchor="Page 4">
    Section 4
  </section>
  <section data-anchor="Page 5">
    Section 5
  </section>
  ...
</main>

Activate the Pageable.

new Pageable("#example");

Default options to customize the scrolling presentation.

new Pageable("#example",{
    pips: true,
    interval: 300,
    delay: 0,
    throttle: 50,
    orientation: "vertical", // or 'horizontal'
    easing: (t, b, c, d, s) => -c * (t /= d) * (t - 2) + b,
});

Callback functions available.

new Pageable("#example",{
    onInit: () => {},
    onBeforeStart: () => {},
    onStart: () => {},
    onScroll: () => {},
    onFinish: () => {},
});

Enable/disable events for PWA.

new Pageable("#example",{
    events: {
      wheel: true,
      mouse: true,
      touch: true
    }
});

API methods.

// Scroll to next page.
instace.next()

// Scroll to previous page.
instace.prev()

// Scroll to a specific
instace.scrollToPage(index)

// Scroll to a specific anchor
instace.scrollToAnchor(anchor)

// Set the orientate
instace.orientate()

Event handlers.

instance.on("init", data => {
  // on init
});

instance.on("update", data => {
  // on update
});

instance.on("scroll.before", data => {
  // before scroll
});

instance.on("scroll.start", data => {
  // when scrolling
});

instance.on("scroll", data => {
  // during scroll
});

instance.on("scroll.end", data => {
  // after scrolling
});

Changelog:

09/17/2018

  • v0.2.2

09/14/2018

  • Added an option to disable events like touch and scroll for pwa

Leave a Reply