Create A Single Page Scrolling Website with jQuery and CSS3 - singular.js
File Size: | 43.1 KB |
---|---|
Views Total: | 9307 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

singular.js is a lightweight jQuery plugin to split a single webpage into several sections so you can scroll through these sections on one page by mouse wheel or dots/arrows navigation.
How to use it:
1. Include the jQuery javascript library together with layout.css and jquery.singular.js in the document.
<link rel="stylesheet" href="css/layout.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="jquery.singular.js"></script>
2. Include the jQuery mousewheel plugin for mouse wheel support (OPTIONAL).
<script src="js/jquery.mousewheel.min.js"></script>
3. Include the jQuery easing plugin for easing options (OPTIONAL).
<script src="js/jquery.easing.js"></script>
4. Create the markup structure for the one page scrolling website.
<div class="mod-page"> <div class="mod-singular js-singular"> <div id="sec01" class="mod-singular-section"> Section 1 </div> <div id="sec02" class="mod-singular-section"> Section 1 </div> <div id="sec03" class="mod-singular-section"> Section 1 </div> <div id="sec04" class="mod-singular-section"> Section 1 </div> </div> <div class="mod-nav"> <ul class="mod-nav-list js-singular-nav"> <li class="mod-nav-item"><a href="#sec01"> Section 1 </a></li> <li class="mod-nav-item"><a href="#sec01"> Section 2 </a></li> <li class="mod-nav-item"><a href="#sec01"> Section 3 </a></li> <li class="mod-nav-item"><a href="#sec01"> Section 4 </a></li> </ul> </div> </div>
5. Setup the plugin in the javascript.
<script> $(function() { $('.js-singular').singular({ section: '.mod-singular-section', nav: '.js-singular-nav', prev: '.js-singular-prev', next: '.js-singular-next', navActiveClass: 'js-singular-active', scrollSpeed: 1000, mousewheel: true, // required jQuery mousewheel plugin easing: 'easeInOutQuart', // requires jQuery easing plugin scrollEnd: function(elem) { // callback console.log('scrollEnd'); } }); }); </script>
Change log:
2014-05-28
- fixed a bug.
This awesome jQuery plugin is developed by Satoh-D. For more Advanced Usages, please check the demo page or visit the official website.