Author: | lipten |
---|---|
Views Total: | 3,152 views |
Official Page: | Go to website |
Last Update: | August 12, 2018 |
License: | MIT |
Preview:

Description:
slidePage is a lightweight yet customizable Zepto plugin which enables you to scroll vertically and smoothly through a set of full-window page sections with mouse and keyboard interaction.
How to use it:
Include the slidePage.css for primary CSS styles.
<link rel="stylesheet" type="text/css" href="slidePage.css">
Include the page-animation.css for CSS3 animations.
<link rel="stylesheet" href="page-animation.css">
Add page sections to your html page. You can specify custom animations for inner elements like this:
<div class="slidePage-container"> <div class="item item1"> <h2>page1</h2> <div class="step step1 fadeIn" data-delay="1000"></div> <div class="step step2 fadeIn"></div> </div> <div class="item item2"> <h2>page2</h2> <div class="step step1 slideRight" data-delay="1300"></div> <div class="step step2 slideLeft"></div> <div class="step step3 zoomIn"></div> </div> <div class="item item3"> <h2>page3</h2> <div class="step step1 slideUp"></div> <div class="step step2 slideDown"></div> </div> <div class="item item4"> <h2>page4</h2> <div class="step step1 heartBeat"></div> <div class="step step2 heartBeat"></div> </div> <div class="item item5"> <h2>page5</h2> <div class="step step1 rollInRight"></div> <div class="step step2 rollInLeft"></div> </div> <div class="item item6"> <h2>page6</h2> <div class="step step1 rollInLeft"></div> <div class="step step2 forceDown" data-delay="1000"></div> <div class="step step3 fadeFlash infinite" data-delay="1500"></div> </div> </div>
Include the slidePage.js script after loading Zepto.js.
<script src="zepto.min.js"></script> <script src="slidePage.js"></script>
Initialize the plugin.
slidePage.init({ // options here });
Customization options with default values.
slidePage.init({ // intial page 'page' : 1, // CSS selector of pages slidePages: '.slide-page', // container element slideContainer: '.slide-container', // callbacks 'before' : function(index){}, 'after' : function(index){}, // re-runs animations when scrolling back 'refresh' : true, // enable mouse wheel useWheel: true, // enable swipe event useSwipe: true, // use animations useAnimation: true });
API methods.
// slide to next slidepage.slideNext() // slide to previous slidepage.slidePrev() // slide to a specific page slidepage.slideTo(page) // destroy slidepage.destroy() // add a new page slidepage.update(newSlidePages)
Changelog:
v3.1.7 (08/12/2018)
- Bugfixes