Tiny One Page Scroll Plugin For Mobile And Desktop - Gun.js

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.