CSS3 and jQuery single page scrolling plugin – singular.js

Want to create single page website quickly? Try singular.js – a lightweight jQuery plugin, to split webpage into several sections with comfortable navigation.

Create a single page scrolling website with singular.js – a jQuery single page plugin

This plugin (jquery-singular-js) is a quick way to create single page. The user can scroll through these sections on one page by mouse wheel, or nice dots / arrows navigation. Cross browser support.

jQuery single page scrolling plugin - singular.js
jQuery single page scrolling plugin – singular.js

Usage

Include jQuery and the plugin:

<script src="jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.imageslider.js"></script>

Create the sections:

<div class="js-singular">
  <section id="sec01" class="singular-section"></section>
  <section id="sec02" class="singular-section"></section>
  <section id="sec03" class="singular-section"></section>
  <section id="sec04" class="singular-section"></section>
  <section id="sec05" class="singular-section"></section>
</div>

Start the plugin:

$(function() {
  $('.js-singular').singular();
});

Ready!

We can adjust following options:

– section – Sections’s classname

– nav – Nav’s classname

– prev – The classname that links to the previous section

– next – The classname that links to the next section

– navActiveClass – The classname current section

– scrollSpeed – scroll speed(ms)

– easing – Easing name. (Require jQuery Easing Plugin)

– mousewheel – Scroll using th mouse wheel. (Require jQuery Mouse Wheel Plugin)

License: MIT

Demo:

https://dl.dropboxusercontent.com/u/21601359/140522_singularjs/index.html

Get jQuery single page plugin from GitHub:

https://github.com/Satoh-D/jquery-singular-js

See also:

SingleJS – a jQuery plugin for single page websites

Enjoy!

Share:Share on Facebook5Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1