Biblioteca de JavaScript para un sitio web de desplazamiento de una página-inscroll

Tiempo de ejecución: 30 minutos. Empezar

Autor: andreymdias
Views Total: 2,322
Sitio oficial: Ir a la web
Actualizado: October 15, 2015
Licencia: MIT

Vista prévia

Biblioteca de JavaScript para un sitio web de desplazamiento de una página-inscroll

Descripción

inscroll es una biblioteca de JavaScript independiente que se utiliza para crear un efecto de desplazamiento vertical suave para el sitio web de una página o aplicación de una sola página.

Funcionamiento

Agregue un conjunto de secciones de contenido a su página web. Tenga en cuenta que cada sección debe tener un atributo de página de datos único como sigue.

<section data-page="section1">

<h2>Section One</h2>
</section>
<section data-page="section2">

<h2>Section Two</h2>
</section>
<section data-page="section3">

<h2>Section Three</h2>
</section>

Cargue el scrollIt. min. CSS, polyfill. min. js y scrollIt. min. js en la Página Web.

<link href="dist/scrollIt.min.css" rel="stylesheet">
<script src="dist/polyfill.min.js"></script>
<script src="dist/scrollIt.min.js"></script>

Active el efecto de desplazamiento de una página.

var scrollIt = new ScrollIt();

Opciones posibles.

var scrollIt = new ScrollIt({



// displays side navigation


nav: true,



// transition time


time: 200,



// transition delay


delay: 150,



// base element


elem: document.body



});

Api.

// go to next section
document.querySelector('buttom#next').addEventListener(function(){


scrollIt.next();
});

// back to previous section
document.querySelector('buttom#previous').addEventListener(function(){


scrollIt.previous();
});

// scroll to section 2
document.querySelector('buttom#to2').addEventListener(function(){


scrollIt.scroll(1);
});

Te puede interesar: