Efecto de desplazamiento mínimo de una página con JavaScript puro-onepagescroll. js

Vista prévia

Descripción

onepagescroll. js es una biblioteca de JavaScript ligera que facilita la creación de un efecto de desplazamiento suave con una navegación de página lateral para su sitio web de una página/aplicación de una sola página. Navegación por teclado y eventos táctiles soportados.

Funcionamiento

Agregue secciones de página a su página web.

<div class="pages">

<section>Section ONE</section>

<section>Section TWO</section>

<section>Section THREE</section>

<section>Section FOUR</section>

<section>Section FIVE</section>
</div>

Agregue referencias a onepagescroll. CSS y onepagescroll. js a la Página Web.

<link href="onepagescroll.css" rel="stylesheet">
<script src="onepagescroll.js"></script>

Llame a la función onepagescroll () en el contenedor superior.

onepagescroll('div.pages');

Personalice el efecto de desplazamiento de una página con las siguientes opciones.

onepagescroll('div.page',{


//child elements selector. use if you don't want to use section for page.

pageContainer: 'section',




 //determine css3 animation that will run when page changes

//ex) 'ease', 'ease-out-in', 'cubic-bezier(0.2, 0.75, 0.5, 1.15)'

animationType: 'ease-in-out',


 //define how long each page takes to animate, 0 for off

animationTime: 500,






//back to the last/first page when you scroll at first/last page


 infinite: true,







 //set show or hide pagination element.



pagination: true,








 //allow up/page-up and down/page-down key for page scroll

keyboard: true,







 //determine direction of page scroll. options available are 'vertical' and 'horizontal'



direction: 'vertical'






 });