Marco de desplazamiento de página completa en Vanilla JavaScript-Wall. js

Vista prévia

Descripción

Wall. js es una biblioteca de JavaScript vainilla que se utiliza para crear un efecto de desplazamiento de página completa sin problemas para su página web de presentación o una aplicación de desplazamiento de página. Con soporte para navegación lateral, navegación superior pegajosa y opciones de personalización.

¿Cómo funciona?

Cree una navegación superior como esta:

<ul class="nav" data-wall-section-nav>

<li class="nav-link">First</li>

<li class="nav-link">Second</li>

<li class="nav-link">Third</li>

...
</ul>

Crea tantas páginas seccionadas como quieras.

<div id="wall">

<section class="section section-1">


Section 1

</section>

<section class="section section-2">


Section 2

</section>

<section class="section section-3">


Section 3

</section>
</div>

También puede crear vínculos de navegación personalizados para navegar entre páginas.

<div id="prev" class="btn btn-secondary">prev</div>
<div id="next" class="btn btn-primary">next</div>

Crear una navegación lateral:

<ul class="dot" data-wall-section-nav>

<li></li>

<li></li>

<li></li>

...
</ul>

Descargue y coloque el archivo JavaScript Wall. js en la parte inferior de la Página Web.

<script src="dist/wall.js"></script>

Inicializar la biblioteca de muro y listo.

var wall = new Wall('#wall');

Active los enlaces de navegación siguiente/anterior.

document.getElementById('prev').addEventListener('click', function () { wall.prevSection(); });
document.getElementById('next').addEventListener('click', function () { wall.nextSection(); });
document.querySelector('.prev-slide').addEventListener('click', function () { wall.prevSlide(); });
document.querySelector('.next-slide').addEventListener('click', function () { wall.nextSlide(); });

Opciones posibles para personalizar la biblioteca de muro.

var wall = new Wall('#wall',{


wrapperZIndex: 1,


sectionAnimateDuration: 1,


easeFunction: 'easeIn',


loopToBottom: false,


loopToTop: false,


sectionNavItemActiveClass: 'active',


animatingClass: 'animating',


currentClass: 'current'
});