Fullscreen Vertical Page Scrolling Plugin With Zepto.js – slidePage

Category: Animation , Javascript , Recommended | August 12, 2018
Views Total:3,176 views
Official Page:Go to website
Last Update:August 12, 2018


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