JavaScript Library Fullpage Scrolling Effect In Vanilla JS | swinch

swinch is a JavaScript library with vanilla.js page sections that implements a full-page smooth scrolling effect on your single-page scrolling website/single-page web applications.

How to make use of it:

1. Link it to the swinch.js file if needed.

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

2. 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>

3. You can also create the 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>

4. Initialize Swinch.

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

5. 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) {
    //
}

Smooth Fullpage Scrolling Effect, swinch Plugin/Github

Read More – 

Create Fast And Simple Fullscreen One Page Scrolling Websites | fullPage.js
jQuery Sliding Display Your Content Like a Deck of Cards


See Demo And Download

Official Website(karlhepler): Click Here

This superior jQuery/javascript plugin is developed by karlhepler. For extra Advanced Usage, please go to the official website.

Share