one-page-scroll
v0.2.5
Published
A simple One Page Scroll plugin.
Downloads
193
Readme
one-page-scroll
An easy javascipt library used to create the fullscreen scroll pages.
It has full support the mouse, keyboard and touch event.
Usage
Just add the script file before end of body.
<body>
<section name="page1"></section>
<section name="page2"></section>
<section></section>
<section name="page4"></section>
...
<script src="https://unpkg.com/one-page-scroll/one-page-scroll.min.js"></script>
</body>Then call it new onePageScroll({options}) .
document.addEventListener('DOMContentLoaded', function() {
var app = new onePageScroll({
el: document.querySelectorAll('section');
})
})That's all.
You can .next(), .prev() and .goto(n) to control page by script.
While page changed, the element will be dispatched a event inview or outview.
So you can do any thing when users or you change the page like this.
el.addEventListener('inview', function(e) {
// do something
})Options
one-page-scroll has 4 options.
{
el, // NodeList - the page elements, required
time, // Number - the animation time(ms), default: 600
easing, // String - CSS animation easing, default: ease-out
loop, // Boolean - loop pages(only the last page to the first page), default: false
throttling // number - the time you want to invoke user to scroll a page at most once
}You can change the last 3 options any times. just app.easing = 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
Browser Support
one-page-scroll support the lastest Chrome, Firefox, Edge and Safari.
Add polyfill before one-page-scroll to support IE > 9.
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Array.prototype.findIndex,Array.prototype.includes,Array.prototype.forEach,CustomEvent"></script>Using Native ES Modules
<script type="module">
import OnePageScroll from '//unpkg.com/one-page-scroll/one-page-scroll.esm.js'
const app = new OnePageScroll(options)
</script>Build
$ npm install
$ npm run build