An easy javascipt library used to create the fullscreen scroll pages.
It has full support the mouse, keyboard and touch event.
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
})
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)'
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>
<script type="module">
import OnePageScroll from '//unpkg.com/one-page-scroll/one-page-scroll.esm.js'
const app = new OnePageScroll(options)
</script>
$ npm install
$ npm run build