Author: | builtbyedgar |
---|---|
Views Total: | 3,294 views |
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 })
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
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)
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.
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.