Horizontal fullpage scroller en Vanilla JavaScript-HPS. js

Vista prévia

Descripción

HPS. js es una biblioteca de JavaScript de scroller horizontal de página completa que le permite desplazarse a través de una serie de secciones de la página de la ventana con la rueda del ratón y eventos táctiles.

Funcionamiento

Cree las diapositivas para el desplazador de página completa.

<div class="page-wrapper">

<section class="content-parent" id="intro">



<h1 class="text-center">Imma first bruh!</h1>

</section>

<section class="content-parent" id="intro2">


<h1 class="text-center">Second section :)</h1>

</section>

<section class="content-parent" id="intro3">


<h1 class="text-center">Third section :D</h1>

</section>

<section class="content-parent" id="intro4">


<h1 class="text-center">Fourth section :3</h1>

</section>

<section class="content-parent" id="intro5">


<h1 class="text-center">Fifth...</h1>

</section>

<section class="content-parent" id="intro6">


<h1 class="text-center">This is the end</h1>

</section>
</div>

Descargue y coloque el archivo JavaScript ' HPS. js ' en la parte inferior de la página HTML.

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

Inicializa la biblioteca y ya está.

var scroller = new HPS('.page-wrapper');

Las opciones posibles con valores predeterminados.

var scroller = new HPS('.page-wrapper',{


ectionClass: 'hps-section',


scrollCallback: false,


touchMult: -2,


firefoxMult: 15,


mouseMult: 1,


ease: 0.1,


controls: {



append: true,



elementClass: 'hps-controls',



prevButtonClass: 'hps-control-prev',



nextButtonClass: 'hps-control-next'


}
});