jQuery Plugin For One Page Parallax Scrolling Effect - msNav

msNav.js is a jQuery plugin for adding a side navigation to the one page scroll website that allows the user to scroll smoothly through different page sections with a subtle parallax effect.

Basic usage:

1. Create an empty element that will be served as the container for the side navigation.

<ul id="nav" class="scroller-nav"></ul>

2. Add page sections and parallax layers to the webpage.

<div id="firstDiv"></div>
<div class="parallex first-parallex"></div>
<div id="secondDiv"></div>
<div class="parallex second-parallex"></div>
<div id="lastDiv"></div>

3. The primary CSS styles for the side navigation.

.scroller-nav {
  position: fixed;
  z-index: 9;
  top: 50%;
  right: 7%;
  background: rgba(242, 103, 34, 0.7);
  padding: 20px 10px;
  border-radius: 555px;
  list-style: none;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

.scroller-nav a {
  font-size: 0;
  display: block;
  position: relative;
  background: #eee;
  border: 3px solid #fff;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  margin: 5px 0;
}

.scroller-nav li a.current { background: #14517f; }

.scroller-nav a:after {
  content: '';
  display: block;
  background: #fff;
  position: absolute;
  bottom: -12px;
  left: 3px;
  height: 10px;
  width: 4px;
}

.scroller-nav a:before {
  content: '';
  display: block;
  background: #fff;
  position: absolute;
  top: -12px;
  left: 3px;
  height: 10px;
  width: 4px;
}

4. Add background images to the parallax layers.

.parallex {
  background-attachment: fixed !important;
  background-position: center center;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  width: 100%;
  min-height: 500px;
}

.first-parallex, .second-parallex { background: url('bg.jpg'); }

5. Include jQuery library and the jQuery msNav.js script at the bottom of the webpage.

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/msNav.js"></script>

6. Enable the plugin.

$(document).MSNAV({

  // navigation elements
  elements: ["#firstDiv", "#secondDiv", "#lastDiv"],

  // parallax elelements
  parallex: [".first-parallex", ".second-parallex"],

  // side navigation
  nav: $('#nav'),

  // active CSS class
  currentClass: "current",

  // scrolling speed in ms
  scrollSpeed: 500
  
});

---

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