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 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