Fullscreen Vertical Page Scrolling Plugin With Zepto.js – slidePage

---

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.

slidePage.init({

  // intial page
  'index' : 1,

  // callbacks
  'before' : function(index){},
  'after' : function(index){},

  // animation speed
  'speed' : 700

  // re-runs animations when scrolling back
  'refresh'  : true,

  // displays scroll arrow
  'useArrow' : true,

  // uses animation
  'useAnimation' : true,

  // uses custom music
  'useMusic' : {
    'autoPlay' : true,
    'loopPlay' : true,
    'src' : 'http://mat1.gtimg.com/news/2015/love/FadeAway.mp3'
  }
  
});