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.
...
Then call it new onePageScroll({options})
.
document
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
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.
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