Desplazamiento mínimo de una página en JavaScript puro-skrllr. js

Vista prévia

Descripción

skrllr. js es un plugin de JavaScript ligero y flexible que implementa el efecto de desplazamiento de una página de pantalla completa táctil básico a su contenido web largo. También soporta las interacciones de la rueda del ratón y el teclado.

La biblioteca de Skrllr le permite transformar su sitio web en un sitio web de desplazamiento de una página que permite a los usuarios desplazarse una página a la vez

Funcionamiento

Agregue páginas seccionadas al documento HTML como esta:

<div class="wrapper">

<main>


<section class="section">



<h1>Section 01</h1>


</section>


<section class="section">



<h1>Section 02</h1>


</section>


<section class="section">



<h1>Section 03</h1>


</section>


<section class="section">



<h1>Section 04</h1>


</section>


<section class="section">



<h1>Section 05</h1>


</section>

</main>
</div>

Cree una navegación para el sitio web de desplazamiento de una página:

<nav class="main-menu">

<ul class="pagination">


<li><a></a></li>


<li><a></a></li>


<li><a></a></li>


<li><a></a></li>


<li><a></a></li>

</ul>
</nav>

El CSS para hacer las páginas seccionadas a pantalla completa.

.skrllr-wrapper {

position: relative;

display: block;

width: 100vw;

height: 100%;

padding: 0;

-webkit-transform-style: preserve-3d;

transform-style: preserve-3d;
}

.skrllr-section {

width: 100%;

height: 100%;

position: relative;

overflow: hidden;
}

.wrapper {

height: 100% !important;

height: 100%;

margin: 0 auto;

overflow: hidden;
}

Estilo de la navegación:

.main-menu {

position: absolute;

top: 50%;

right: 20px;
}

.pagination { list-style: none; }

.pagination li {

position: relative;

width: 20px;

height: 20px;

margin-bottom: 10px
}

.pagination li a {

position: absolute;

top: 0;

left: 0;

width: 20px;

height: 20px;

background-color: black;

border-radius: 50%;

margin-bottom: 10px
}

.pagination li a:hover,
.pagination li a.active {

background-color: white;

border: 2px solid black;
}

Inicialice el Skrllr en el contenido "Main".

const skrllr = new Skrllr('main', {



// options here
})

Config el comportamiento de desplazamiento de una página.

const skrllr = new Skrllr('main', {




// child container



container: 'section',




// easing function



easing: 'ease',




// transition time in ms



transitionTime: 1000,




// shows pagination



pagination: true,




// custom menu



menu: null,




// auto update url when switching



updateURL: false,




// callback functions



beforeTransition: null,



afterTransition: null




})