Tiny One Page Scroll Plugin For Mobile And Desktop - Gun.js
File Size: | 6.39 KB |
---|---|
Views Total: | 1037 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Gun.js is a lightweight jQuery plugin used to implement the fullscreen one page scroll effect on your webpage that supports mouse wheel, keyboard navigation and touch gesture events.
How to use it:
1. Load the needed jQuery library or Zepto.js in the document.
<script src="zepto.min.js"></script> <!-- OR --> <script src="jquery.min.js"></script>-->
2. Load the style sheet gun.css
and JavaScript file gun.js
in the document.
<link rel="stylesheet" href="libs/gun.css"> <script src="libs/gun.js"></script>
3. Add sectioned pages and side navigation buttons to the document.
<div class="gun-wrap wrap1"> <div class="content1"> <div class="gun-page page1"></div> <div class="gun-page page2"></div> <div class="gun-page page3"></div> <div class="gun-page page4"></div> <div class="gun-page page5"></div> ... </div> <ul class="gun-nav"> <li class="gun-li">1</li> <li class="gun-li">2</li> <li class="gun-li">3</li> <li class="gun-li">4</li> <li class="gun-li">5</li> ... </ul> </div>
4. Active the one page scroll effect:
$('.gun-page').gun({ nav: 'gun-li' });
5. Set the scrolling direction:
$('.gun-page').gun({ // true = horizontal landscape: false });
6. Set the animation speed:
$('.gun-page').gun({ time: 500 });
This awesome jQuery plugin is developed by win5do. For more Advanced Usages, please check the demo page or visit the official website.