Create Beautiful Fullscreen Scrolling Websites Using switchPage.js

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.