Multi Page Animations with jQuery, CSS3 and Velocity.js - Gridify

Gridify is a jQuery plugin which transforms the webpage into a multi-page grid so you can switch between the grid pages with a zoom in animation based on CSS3 and velocity.js. Great for creating professional, good-looking presentations that can be viewed inside the browser.

See it in action:

Basic usage:

1. Load the jQuery gridify plugin after jQuery library.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="dist/jquery.gridify.js"></script>

2. Load the required Velocity.js for accelerated JavaScript animations.

<script src="velocity.min.js"></script>

3. Add sectioned content into your web page.

<div class="container">
  <div class="page section-1">
      ...
  </div>
  <div class="page section-2">
      ...
  </div>
  <div class="page section-3">
      ...
  </div>
</div>

4. Make the multi-page grid fullscreen.

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

5. Add background colors to the sections (OPTIONAL).

.section-1 { background-color: #DA4453; }

.section-2 { background-color: #2980B9; }

.section-3 { background-color: #16A085; }

6. Call the plugin on the parent container element and then you can navigate between these content sections using arrow keys.

$(".container").gridify();

7. Default plugin options.

// CSS Selector for arrows upon which the page movement is fired
arrows: {
  left: ".arrow",
  right: ".arrow",
  top: ".arrow",
  bottom: ".arrow"
},

// the page CSS Selector
pageSelector: ".page",

// number of pages per row. 
pagesPerRow: 3,

// Enable navigating between grid pages using keyboard arrows
arrowKeysEnabled: true,

// Callbacks
// The i,j represents the current page position in 2D space
onAfterPageSlide: function (i,j) {},
onBeforePageSlide: function (i,j) {}

Change log:

2015-05-01

• Improve code

---

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