Fullscreen Scrolling Presentation In JavaScript – Pageable

Category: Animation , Javascript | December 20, 2018
Author: Mobius1
Views Total: 1,183
Official Page: Go to website
Last Update: December 20, 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,
    swipeThreshold: 50,
    orientation: "vertical", // or 'horizontal'
    freeScroll: false,
    navPrevEl: false,
    navNextEl: false,
    infinite: false, // infinite scroll
    slideshow: { // enable slideshow
      interval: 3000 // time in ms between page change
    },
    easing: function(currentTime, startPos, endPos, interval) {
      // the easing function used for the scroll animation
      return -endPos * (currentTime /= interval) * (currentTime - 2) + startPos;
    }
});

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:

v0.6.2 (12/15/2018)

  • bugfix

v0.6.1 (12/15/2018)

  • fix clones error

v0.6.0 (12/10/2018)

  • support IE9 and above

v0.5.5 (12/09/2018)

  • fix touch controls

v0.5.4 (11/29/2018)

  • update

v0.4.3 (11/27/2018)

  • update

v0.4.0 (11/27/2018)

  • added more options

v0.3.9 (11/26/2018)

  • Fixed: Array.from not supported in IE11

11/20/2018

  • Refactor

11/14/2018

  • v0.3.6: hot fix

11/13/2018

  • v0.3.4: Force remove delay with freeScroll

11/13/2018

  • Fix scrolling bug

10/31/2018

  • v0.2.3: add swipeThreshold

09/17/2018

  • v0.2.2

09/14/2018

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

You Might Be Interested In:

Leave a Reply