Smooth full page desplazamiento efecto en JavaScript puro-swinch

Vista prévia

Descripción

swinch es una biblioteca JavaScript de gran rendimiento y fácil de implementar que aplica el efecto de desplazamiento de página completa suave a su sitio web de desplazamiento de una página/aplicaciones Web de una sola página.

Sin la necesidad de ninguna de las 3 dependencias. Fuertemente basado en la biblioteca < a href = "https://zengabor.github.io/zenscroll/" > zenscroll para proporcionar el efecto de desplazamiento suave.

Funcionamiento

Enlace a la swinch. js cuando sea necesario.

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

Agregue secciones de contenido de página completa al documento.

<main>

<section id="one"></section>

<section id="two"></section>

<section id="three"></section>

<section id="four"></section>
</main>

También puede crear una navegación utilizada para alternar entre estas secciones.

<header>

<a href="#one">One</a>

<a href="#two">Two</a>

<a href="#three">Three</a>

<a href="#four">Four</a>
</header>

Inicializar la estafa y listo.

// swinch.init(sections, options)
swinch.init(null, {

// options here
});

Opciones posibles y funciones de devolución de llamada.

/**
 * 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) {


//
}