Minimal One Page Scrolling with jQuery and CSS3 - pagescroll
File Size: | 3.82 KB |
---|---|
Views Total: | 1547 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
pagescroll is a super lightweight jQuery one page scrolling plugin that utilizes CSS3 3D transforms for page transition effects, with a a fallback to jQuery's animate()
when CSS3 are not supported.
How to use it:
1. Split your one page website into several sections. With this plugin, you can horizontally or vertically navigate through these content sections with arrow keys.
<div id="container"> <div class="section active" id="section0"> </div> <div class="section" id="section1"> </div> <div class="section" id="section2"> </div> <div class="section" id="section3"> </div> </div>
2. Make the content sections 100% height and width.
body, html { padding: 0; margin: 0; height: 100%; overflow: hidden; } #container, .section { height: 100%; position: relative; }
3. Load jQuery library and jQuery pagescroll plugin at the end of the document..
<script src="jquery.min.js"></script> <script src="onepagescroll.js"></script>
4. Call the plugin on the wrapper element and set the position of page transitions.
$('#container').onepagescroll({ 'direction': 'vertical' })
5. Full plugin options.
$('#container').onepagescroll({ // animation duration in ms 'duration': 500, // horizontal or vertical 'direction': 'horizontal', // show side pagination 'showpages': true })
This awesome jQuery plugin is developed by justnode. For more Advanced Usages, please check the demo page or visit the official website.