Minimal jQuery Full Window Page Slider Plugin - Navigate.js
File Size: | 3.64 KB |
---|---|
Views Total: | 1702 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Navigate.js is a simple jQuery plugin that splits the content sections into several fullscreen pages so the visitors can navigate between them with a smooth sliding effect using CSS3 transitions. Ideal for web-based presentation and one page scroll website.
How to use it:
1. Load jQuery JavaScript library and the jQuery navigate.js plugin in the html page.
script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="navigate.js"></script>
2. Add content sections with navigation controls to the webpage
<div class="page" id="page1"> <h1>Page 1</h1> <p onclick="navigateTo("#page2")">Go to Page 2</p> <p onclick="goBack()">Back</p> </div> <div class="page" id="page2"> <h1>Page 2</h1> <p onclick="navigateTo("#page3")">Go to Page 3</p> <p onclick="goBack()">Back</p> </div> <div class="page" id="page3"> <h1>Page 3</h1> <p onclick="navigateTo("#page1")">Go to Page 1</p> <p onclick="goBack()">Back</p> </div>
3. The CSS to make the pages full window.
body { margin: 0px; overflow-x: hidden; } .page { width: 100vw; height: 100vh; -webkit-transition: margin 0.3s; margin-left: 100vw; position: absolute; display: inline-block; }
Change log:
2015-11-30
- JS and CSS update.
2015-11-17
- Update navigate.js
2015-11-10
- Fixed some bugs, performance improvements
This awesome jQuery plugin is developed by tigertooth01. For more Advanced Usages, please check the demo page or visit the official website.