Create Beautiful Fullscreen Scrolling Websites Using switchPage.js
File Size: | 1.87 MB |
---|---|
Views Total: | 5293 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

switchPage.js is a small (~5kb) jQuery plugin for create a beautiful fullscreen scrolling website which allows you switch between sectioned pages with mouse wheel or keyboard arrows.
Features:
- Support either 'vertical' or 'horizontal' scrolling direction.
- Auto scroll back to the first page as you reach the last one.
- Side bullets indicator.
- Custom page transition speed.
How to use it:
1. Import and place the switchPage.js script at the bottom of your webpage.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="switchPage.js"></script>
2. Add sectioned content into the webpage as displayed below.
<div id="container"> <div class="section active"> Section One </div> <div class="section"> Section Two </div> <div class="section" id="section2"> Section Three </div> </div>
3. Make the sectioned content 100% width & height.
* { padding: 0; margin: 0; } html, body { height: 100%; overflow: hidden; } #container, .section { height: 100%; position: relative; }
4. Initialize the plugin with default parameters.
$(function(){ $("#container").switchPage({ // options here }); });
5. Options and defaults.
$(function(){ $("#container").switchPage({ // top container 'container': '#container', // content sections 'sections': '.section', // ease-in,ease-out,linear 'easing': 'ease', // animation speed 'duration': 1000, // shows pagination 'pagination': true, // enable infinite loop 'loop': false, // enable keyboard support 'keyboard': true, // vertical or horizontal 'direction': 'vertical', // callback function 'onpageSwitch': function(pagenum) {} }); });
This awesome jQuery plugin is developed by wangcaipang. For more Advanced Usages, please check the demo page or visit the official website.