Create A Single Page Scrolling Website with jQuery and CSS3 - singular.js

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.