Fullpage Scrolling Framework In Vanilla JavaScript – wall.js

Preview:

Description:

wall.js is a vanilla JavaScript library used to create a smooth fullpage scrolling effect for your presentation webpage or one page scrolling web application. With support for side navigation, sticky top navigation, and customization options.

Basic usage:

Create a top navigation as this:

<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>

Create as many sectioned pages as you like.

<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>

You can also create custom navigation links to navigate between pages.

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

Create a side navigation:

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

Download and put the JavaScript file wall.js at the bottom of the webpage.

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

Initialize the wall library and done.

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

Activate the next/prev navigation links.

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(); });

Possible options to customize the Wall library.

var wall = new Wall('#wall',{
    wrapperZIndex: 1,
    sectionAnimateDuration: 1,
    easeFunction: 'easeIn',
    loopToBottom: false,
    loopToTop: false,
    sectionNavItemActiveClass: 'active',
    animatingClass: 'animating',
    currentClass: 'current'
});