Create full page websites and presentations!
npm install one-page --save
- responsive navbar
- touch support
- navigating by arrow keys
- horizontal scroll
<link rel="stylesheet" href="node_modules/one-page/dist/onePage.min.css">
<script src="node_modules/one-page/dist/onePage.min.js"></script>You can choose one of two modes: stack or normal.
<div id="container" class="sections-container">
<section class="section">1</section>
<section class="section">2</section>
<section class="section">3</section>
<section class="section">4</section>
</div>const page = new OnePage({
mode: 'normal',
containerId: '#container'
})
page.initPage()<section class="section stack">1</section>
<section class="section stack">2</section>
<section class="section stack">3</section>
<section class="section stack">4</section>const page = new OnePage({
mode: 'stack'
})
page.initPage()You can add navbar to allow navigating through buttons.
<nav class="navbar">
<button type="button" class="link">
1
</button>
<button type="button" class="link">
2
</button>
<button type="button" class="link">
3
</button>
<button type="button" class="link">
4
</button>
</nav>It is very important that you use excatly same class name for every element.
You need to specify additional option during object creation.
const page = new OnePage({
mode: 'stack',
navbar: true
})
page.initPage()
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent