jQuery & CSS3 Based Smooth One Page Scrolling Effect
File Size: | 6.63 KB |
---|---|
Views Total: | 3068 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

onepagescroll.js is a lightweight jQuery plugin that uses CSS3 transitions and transforms to implement a smooth one page scrolling effect with snapping functionality to your single page website.
How to use it:
1. Include jQuery JavaScript library and the jQuery onepagescroll.js plugin at the bottom of your webpage.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.onepagescroll.min.js"></script>
2. Create a set of content panels for your webpage.
<div id="box"> <div> Panel One </div> <div> Panel Two </div> <div> Panel Three </div> <div> Panel Four </div> </div>
3. Create a side navigation which allows the visitor to navigate between these content panels with mouse click.
<div id="contorl" class="px"> <span class="db on"></span> <span class="db"></span> <span class="db"></span> <span class="db"></span> </div>
4. Enable the plugin.
var onepage = $("#box").onepagescroll({ box: "div", // SELECTOR cycle: 0 // infinite looping }, function (o) { // side navigation $("#contorl .on").removeClass("on"); $("#contorl span").eq(o.index).addClass("on"); }); $("#contorl span").click(function(){ onepage.change($(this).index()); });
5. Style the side navigation.
#contorl { height: 200px; width: 40px; right: 0; top: 50%; margin-top: -100px; z-index: 9; position: fixed; } #contorl span { display: block; width: 20px; height: 20px; border-radius: 50%; background: #a08c8c; margin: 15px 10px; cursor: pointer; } #contorl span.on { background: #000000; }
6. Plugin's default options.
// selector box: "div", // minimum distance in px for touch swipe disance: 100, // infinite looping // 0 = disable cycle: 1, // animation speed animationTime: 0.8, // except these elements... exception:["SPAN","test2","test3"]
Change log:
2015-10-10
- fixed for iOS
- add an exception option
2015-06-18
- fixed for IE 8 / 7
This awesome jQuery plugin is developed by yuminjustin. For more Advanced Usages, please check the demo page or visit the official website.