Fullscreen Vertical Page Scrolling Plugin With Zepto.js – slidePage

Category: Animation , Javascript , Recommended | August 12, 2018
Author: lipten
Views Total: 2,358 views
Official Page: Go to website
Last Update: August 12, 2018
License: MIT


Fullscreen Vertical Page Scrolling Plugin With Zepto.js – slidePage


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">
      <div class="step step1 fadeIn" data-delay="1000"></div>
      <div class="step step2 fadeIn"></div>
  <div class="item item2">
      <div class="step step1 slideRight" data-delay="1300"></div>
      <div class="step step2 slideLeft"></div>
      <div class="step step3 zoomIn"></div>
  <div class="item item3">
      <div class="step step1 slideUp"></div>
      <div class="step step2 slideDown"></div>
  <div class="item item4">
      <div class="step step1 heartBeat"></div>
      <div class="step step2 heartBeat"></div>
  <div class="item item5">
      <div class="step step1 rollInRight"></div>
      <div class="step step2 rollInLeft"></div>
  <div class="item item6">
      <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>

Include the slidePage.js script after loading Zepto.js.

<script src="zepto.min.js"></script>
<script src="slidePage.js"></script>

Initialize the plugin.

  // options here

Customization options with default values.


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

// slide to previous

// slide to a specific page

// destroy

// add a new page


v3.1.7 (08/12/2018)

  • Bugfixes

You Might Be Interested In:

Leave a Reply