Smooth Fullpage Scrolling Effect In Pure JavaScript – swinch

Preview:

Description:

swinch is a performant and easy-to-implement JavaScript library which applies the smooth full-page scrolling effect to your one page scrolling website / single-page web applications.

Without the need of any 3rd dependencies. Heavily based on the zenscroll library to provide the smooth scrolling effect.

How to use it:

Link to the swinch.js when needed.

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

Add full-page content sections to the document.

<main>
  <section id="one"></section>
  <section id="two"></section>
  <section id="three"></section>
  <section id="four"></section>
</main>

You can also create a navigation used to switch between these sections.

<header>
  <a href="#one">One</a>
  <a href="#two">Two</a>
  <a href="#three">Three</a>
  <a href="#four">Four</a>
</header>

Initialize the swinch and done.

// swinch.init(sections, options)
swinch.init(null, {
  // options here
});

Possible options and callback functions.

/**
 * The duration of the snap, in milliseconds
 *
 * @type {Number}
 */
duration: 500,
/**
 * The offset of the snapping target
 *
 * @type {Number}
 */
offset: 0,
/**
 * Force ScrollControl to snap on a part of each section.
 *
 * null     Snap to the bottom of each section if going up & top if going down.
 * 'top'    Force snap to the top of each section
 * 'bottom' Force snap to the bottom of each section
 * 
 * @type {string|null}
 */
snapTo: null,
/**
 * Called before the snapping starts
 *
 * @param  {Node}   currentSection
 * @param  {Node}   nextSection
 * @param  {Object} scrollDirection {isUp: <boolean>, isDown: <boolean>}
 *
 * @return {void}
 */
onBeforeSnap: function onBeforeSnap(currentSection, nextSection, scrollDirection) {
    //
},
/**
 * Called after the snapping completes
 *
 * @param  {Node}   currentSection
 * @param  {Node}   previousSection
 * @param  {Object} scrollDirection {isUp: <boolean>, isDown: <boolean>}
 *
 * @return {void}
 */
onSnapped: function onSnapped(currentSection, previousSection, scrollDirection) {
    //
}