Minimal One Page Scroll In Pure JavaScript – skrllr.js

Category: Animation , Javascript | May 10, 2017
Author:builtbyedgar
Views Total:3,294 views
Official Page:Go to website
Last Update:May 10, 2017
License:MIT

Preview:

Minimal One Page Scroll In Pure JavaScript – skrllr.js

Description:

skrllr.js is a lightweight, flexible JavaScript plugin that implements the basic, touch-enabled fullscreen one page scrolling effect to your long web content. Also supports for mouse wheel and keyboard interactions.

The Skrllr library lets you transform your website into a one page scroll website that allows users to scroll one page at a time

How to use it:

Add sectioned pages to the html document as this:

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

Create a navigation for your one page scrolling website:

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

The CSS to make the sectioned pages fullscreen.

.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;
}

Style the navigation:

.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;
}

Initialize the Skrllr on the “main” content.

const skrllr = new Skrllr('main', {
      // options here
})

Config the one page scroll behavior.

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

 

You Might Be Interested In:


4 thoughts on “Minimal One Page Scroll In Pure JavaScript – skrllr.js

  1. Pavel Sokolov

    Unfortunately it doesn’t work.

    Says
    Uncaught TypeError: Cannot read property ‘querySelectorAll’ of null
    at Skrllr.addDataAttributes (skrllr.js:77)
    at new Skrllr (skrllr.js:44)
    at script.js:1
    addDataAttributes @ skrllr.js:77
    Skrllr @ skrllr.js:44
    (anonymous) @ script.js:1

    Reply
  2. Pavel Sokolov

    Well, now it’s
    Uncaught TypeError: Cannot read property ‘dataset’ of null
    at Skrllr.checkHash (skrllr.es5.js:152)
    at new Skrllr (skrllr.es5.js:52)
    at HTMLDocument. (script.js:3)

    Reply
  3. Pavel Sokolov

    Ok, now it’s seems working but one error
    skrllr.min.js:1 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.

    Reply
  4. artem

    Can some body tell me where i need to Initialize the Skrllr on the “main” content. and Config the one page scroll behavior.
    Its work,but background images from two pages disappear.

    Reply

Leave a Reply