Author: | builtbyedgar |
---|---|
Views Total: | 2,291 |
Official Page: | Go to website |
Last Update: | May 10, 2017 |
License: | MIT |
Preview:

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