Lightweight Fullscreen Scroll Animation Plugin With jQuery - slidePage

slidePage is a lightweight, touch-enabled jQuery/Zepto one page scrolling plugin that supports both desktop and mobile devices. Your visitors are able to scroll through your long webpage through mouse wheel, touch swipe and navigation links. Smooth scroll animations based on CSS3 transforms and transitions.

Install it via NPM:

# NPM
$ npm install slidePage

How to use it:

1. Import jQuery library (Or Zepto.js) and the slidePage plugin's files into the html document.

<link rel="stylesheet" href="slidePage.css">
<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="slidePage.min.js"></script>

2. Markup html structure:

<div class="slidePage-container" id="slidePage-container">

  <div class="item item1">
    Item 1
  </div>
  <div class="item item2">
    Item 2
  </div>
  <div class="item item3">
    Item 3
  </div>
  ...

</div>

3. You might need a side navigation (pagination) to switch between pages manually.

<nav class="pagination" id="pagination">
  <div class="prev-page" onclick="slidePage.prev()">Up</div>
  <a onclick="slidePage.index(1)"></a>
  <a onclick="slidePage.index(2)"></a>
  <a onclick="slidePage.index(3)"></a>
  ...
  <div class="next-page" onclick="slidePage.next()">Down</div>
</nav>

4. Initialize the slidePage as this. That's it.

slidePage.init();

5. Possible plugin options.

slidePage.init({

  // start index
  'index':page,

  // CSS selector of pages
  'pageContainer': '.item',

  // after/before scrolling callback functions
  'after': function() {},
  'before': function() {},

  // transition delay in milliseconds
  'speed': false,

  // refresh animation on each transition
  'refresh': false,

  // enable mouse wheel
  'useWheel': true,

  // enable keyboard interaction
  'useKeyboard':true,

  // enable animation
  'useAnimation': true
  
});

6. Apply CSS animations to page elements.

<link rel="stylesheet" href="page-animation.css">

<div class="step slideRight" data-delay="1300"></div>
<div class="lazy slideRight"></div>

7. API methods.

// scrolls to the previous page
slidePage.prev()

// scrolls to the next page
slidePage.next()

// fires an animation (with 'lazy' class)
slidePage.fire(pageIndex)

// removes a page
slidePage.remove(pageIndex，callback)

// recovers a page
slidePage.recover(pageIndex，callback)

Change log:

2017-12-19

• fix slide bug

2017-12-12

• fix init bug

---

This awesome jQuery plugin is developed by lipten. For more Advanced Usages, please check the demo page or visit the official website.