Fullscreen Scrolling Presentation In JavaScript – Pageable

Category: Animation , Javascript | March 25, 2019
Author: Mobius1
Views Total: 1,960
Official Page: Go to website
Last Update: March 25, 2019
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",{

    // displays navigation pips
    pips: true,
    
    // animation speed
    animation: 300,

    // delay in ms
    delay: 0,

    // the interval in ms that the resize callback is fired
    throttle: 50,

    // swipe / mouse drag distance in px
    swipeThreshold: 50,

    // or 'horizontal'
    orientation: "vertical", 

    // drag / scroll freely instead of snapping to the next page
    freeScroll: false,

    // nav elements
    navPrevEl: false,
    navNextEl: false,

    // infinite scroll
    infinite: false, 

    // default: false
    slideshow: { // enable slideshow
      interval: 3000,
      delay: delay
    },

    // easing function
    easing: function easing(t, b, c, d, s) {
     return -c * (t /= d) * (t - 2) + b;
    },

    // child selector
    childSelector: '[data-anchor]',
    
});

Callback functions available.

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

Enable/disable trigger events.

new Pageable("#example",{
    events: {
      wheel: true,
      mouse: true,
      touch: true,
      keydown: 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 orientation
// 'vertical' or 'horizontal'
instace.orientate(orientation);

// Stop the slideshow
instace.slideshow().stop();

// start/resume the slideshow
instace.slideshow().start();

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.8 (03/25/2019)

  • Fix IE10 compatability

v0.6.7 (03/19/2019)

  • updated

v0.6.6 (03/10/2019)

  • Added anchors option.

v0.6.5 (02/12/2019)

  • Fixed drag and freeScroll not working.

v0.6.4 (12/15/2018)

  • Allow toggling of keyboard navigation
  • Add option for custom child selector

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