Full-featured One Page Scroll Plugin With jQuery - viewScroller.js

viewScroller.js is a simple, flexible, smooth and configurable jQuery one page scroll plugin that provides a great navigation / scrolling experience for your one page website or single page web application.

Main features:

• Customizable animations and easing effects.
• Keyboard navigation.
• Mouse wheel supported as well.
• allows to make the browser fit to the closest view
• Supports both horizontal and vertical scrolling
• Loop mode.
• Callback functions.
• Lots of API and customizable options.

Basic usage:

1. Load the needed jQuery library and other required resources in the html document.

<link rel="stylesheet" href="viewScroller.css">
<script src="jquery.min.js"></script>
<script src="viewScroller.js"></script>

2. Load the jQuery easing plugin for additional easing functions.

<script src="jquery.easing.min.js"></script>

3. Load the jQuery mousewheel plugin for mousewheel support.

<script src="jquery.mousewheel.min.js"></script>

4. Add all your main views to the DIV containers with the CSS class of 'mainview'. The 'vs-anchor' attribute is used to specify the unique anchor ID for each view.

<div class="mainbag">
  <div vs-anchor="firstview" class="mainview">View 1</div>
  <div vs-anchor="secondview" class="mainview">View 2</div>
  <div vs-anchor="thirdview" class="mainview">View 3</div>
</div>

5. Create anchor links to navigate between these views.

<a href="#firstview" class="vs-anchor">View 1</a>
<a href="#secondview" class="vs-anchor">View 2</a>
<a href="#thirdview" class="vs-anchor">View 3</a>

6. Create navigation buttons as follows:

<button class="vs-mainview-prev">prev mainview</button>
<button class="vs-mainview-next">next mainview</button>

<a href="#" class="vs-mainview-prev">prev mainview</a>
<a href="#" class="vs-mainview-next">next mainview</a>

7. Initialize the plugin with default options.

$('.mainbag').viewScroller();

8. All default configuration options.

$('.mainbag').viewScroller({
  
  // Animation speed of mainviews: 0 - fastest
  animSpeedMainView: 700, 

  // Animation speed of subviews: 0 - fastest
  animSpeedSubView: 700, 

  // Animation effect of mainviews change - jQuery (easing)
  animEffectMainView: 'easeInOutCubic', 

  // Animation effect of subviews change - jQuery (easing)
  animEffectSubView: 'easeInOutCubic', 

  // Animation effect of mainviews change - CSS3 (easing)
  animEffectMainViewCss3: 'ease', 

  // Animation effect of subviews change - CSS3 (easing)
  animEffectSubViewCss3: 'ease', 

  // Use keyboard to change views
  useKeyboard: true, 

  // Use scrollbar to change views
  useScrollbar: false, 

  // Change views when they are changing
  changeWhenAnim: true, 

  // Change horizontal views (mainviews) in loop mode
  loopMainViews: false, 

  // Change vertical views (subviews) in loop mode
  loopSubViews: false, 

  // Will the browser fit to the closest view (works if the useScrollbar option is true)
  fitToView: true, 

  // Time between stop scrolling and start fitting to the closest view
  timeToFit: 1000, 

  // (in px) width of the mainbag - if 0 - then width = 100% of window (in px) = .mainbag { width: XXX }
  fixedWidth: 0, 

  // (in px) a total value of the right and the left CSS margin dimensions of the .mainbag, for example: if .mainbag { left: XXX, right: YYY} then spaceMainBag = XXX + YYY
  spaceMainBag: 0, 

  // Callback which is called before views change
  beforeChange: null, 

  // Callback which is called after views change
  afterChange: null, 

  // Callback which is called before browser window resize
  beforeResize: null, 

  // Callback which is called after browser window resize
  afterResize: null 
  
});

9. API.

// setAnimSpeedMainView(value)
$.fn.viewScroller.setAnimSpeedMainView(300);

// setAnimSpeedSubView(value)
$.fn.viewScroller.setAnimSpeedSubView(300);

// setAnimEffectMainView(easing_func_name)
$.fn.viewScroller.setAnimEffectMainView('easeInOutCubic');

// setAnimEffectSubView(easing_func_name)
$.fn.viewScroller.setAnimEffectSubView('easeInOutCubic');

// setAnimEffectMainViewCss3(easing_func_name)
$.fn.viewScroller.setAnimEffectMainViewCss3('ease');

// setAnimEffectSubViewCss3(easing_func_name)
$.fn.viewScroller.setAnimEffectSubViewCss3('ease');

// setUseKeyboard(true/false)
$.fn.viewScroller.setUseKeyboard(true);

// setUseScrollbar(true/false)
$.fn.viewScroller.setUseScrollbar(false);

// setChangeWhenAnim(true/false)
$.fn.viewScroller.setChangeWhenAnim(true);

// setLoopSubViews(true/false)
$.fn.viewScroller.setLoopSubViews(true);

// setLoopMainViews(true/false)
$.fn.viewScroller.setLoopMainViews(true);

// setFitToView(true/false)
$.fn.viewScroller.setFitToView(true);

// setTimeToFit(value)
$.fn.viewScroller.setTimeToFit(800);

// setFixedWidth(value)
$.fn.viewScroller.setFixedWidth(140);

// setSpaceMainBag(value)
$.fn.viewScroller.setSpaceMainBag(140);

---

This awesome jQuery plugin is developed by Viewdesic. For more Advanced Usages, please check the demo page or visit the official website.