Basic One Page Scroll In Vanilla JavaScript – LeScroll

Category: Javascript , Layout | February 13, 2015
Author: geomolenaar
Views Total: 3,794
Official Page: Go to website
Last Update: February 13, 2015
License: MIT

Preview:

Basic One Page Scroll In Vanilla JavaScript – LeScroll

Description:

LeScroll.js Helps you create a responsive one page scrolling website with CSS transitions, written in vanilla JavaScript.

Use either your keyboard, mouse or the bullets on the right side of this page to navigate through all the different sections.

How to use it:

Load the lescroll.js at the end of the document.

<script src="scripts/lescroll.min.js">

The markup structure to create a one page scrolling website.

<div id="mask">
  <nav>
    <ul>
      <li data-section="0"></li>
      <li data-section="1"></li>
      <li data-section="2"></li>
      <li data-section="3"></li>
    </ul>
  </nav>
  <div id="container">
    <section class="turquoise-bg">
      <div class="content">
        Content 1
      </div>
    </section>
    <section class="carrot-bg">
      <div class="content">
        Content 2
      </div>
    </section>
    <section class="blue-bg">
      <div class="content">
        Content 3
      </div>
    </section>
    <section class="turquoise-bg">
      <div class="content">
        Content 4
      </div>
    </section>
  </div>
</div>

Simply add an event by specifying the id or class of your element and the section you want it linked to.

leScroll.addEvent('#clickme', 0); 
leScroll.addEvent('.next', 3);

You Might Be Interested In:


Leave a Reply