Author: | oldtimeguitarguy |
---|---|
Views Total: | 3,436 views |
Official Page: | Go to website |
Last Update: | November 11, 2016 |
License: | MIT |
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) { // }
I am searching for the one page drop down plugin. Which i could click on drop down menu and it land up to respective tab.