jQuery Plugin For One Page Parallax Scrolling Effect - msNav
File Size: | 5.64 KB |
---|---|
Views Total: | 6092 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.