Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 864cba6b1e
Fetching contributors…

Cannot retrieve contributors at this time

46 lines (36 sloc) 1.439 kb

jq-tiles

Split images in tiles with css3 transitions.

Demo: http://elclanrs.github.com/jq-tiles/
Support: Webkit, Firefox, Opera, IE10, IE9-8*
License: MIT
* In browsers that don't support css3 transitions classes won't be animated but some effects will still work, just a bit choppy.
** IE8 requires polyfills for Array.prototype.map and Array.prototype.forEach. You may use ES5 Shim.

Options:

  • x: number of tiles in X axis.
  • y: number of tiles in Y axis.
  • rand: animate tiles in random order.
  • speed: speed of effect in ms.
  • effect: default, simple, switchlr, switchud, updown, leftright, fliplr, flipud.
  • reverse: begin effect from opposite side.
  • limit: limit animation to a certain percentage of the image.
  • rewind: toggle animation back at a certain point in time (percentage).

Effects:

  • default
  • simple
  • switchlr: y=1 and x must be even.
  • switchud: x=1 and y must be even.
  • updown: y=1.
  • leftright x=1.
  • fliplr
  • flipud

Usage:

Use .trigger('toggleTiles', callback) to toggle the effect on and off.

Example:

var $img = $('img').tiles({ rand: true });
$('button').click(function(){ 
  $img.trigger('toggleTiles', function($tiles, $image){
    // Finished
  });
};
Jump to Line
Something went wrong with that request. Please try again.