This time I will share jQuery Plugin and tutorial about Smooth Page Switch Plugin For Mobile Web Pages – slideit.js, hope it will help you in programming stack.
slideit.js is a lightweight jQuery plugin that provides smooth, high performance, vertical page switch animations for your mobile website. Based on CSS3 transitions and transforms. Note that you should run the demo on the mobile or mobile simulator (e.g. Google Chrome dev tool).
How to use it:
1. Load the jQuery slideit.js plugin’s CSS file in the header of your html document.
1 |
<link rel="stylesheet" href="jquery.slideit.css"> |
2. Split your webpage into several page sections like this:
2 |
<section class='red'></section> |
3 |
<section class='grey'></section> |
4 |
<section class='blue'></section> |
5 |
<section class='yellow'></section> |
6 |
<section class='green'></section> |
3. Load jQuery library and the jQuery slideit.js plugin’s CSS file at the bottom of the document.
1 |
<script src="//code.jquery.com/jquery-2.2.1.min.js"></script> |
2 |
<script src='jquery.slideit.js'></script> |
4. Call the function on the top container to initialize the plugin.
1 |
$('#slideit').slideit({ |
5. Possible plugin options.
1 |
$('#slideit').slideit({ |
This awesome jQuery plugin is developed by WangXueZhi. For more Advanced Usages, please check the demo page or visit the official website.
