jQuery Plugin To Order and Filter Items With Shuffling Animation - Quicksand

File Size: 24 KB
Views Total: 7940
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Order and Filter Items With Shuffling Animation - Quicksand

Quicksand is a jQuery plugin that provides a simple and nice way to filter and reorder sets of items with useful and eye-pleasing shuffling effects.

Basic Usage:

1. Include jQuery library and jQuery Quicksand plugin in the header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.quicksand.js"></script>

2. Include other necessary javascript files on the web page

<script type="text/javascript" src="jquery-animate-css-rotate-scale.js"></script> 
<script type="text/javascript" src="jquery-css-transform.js"></script>

3. Include jQuery easing plugin for easing support

<script type="text/javascript" src="jquery.easing.1.3.js"></script> 

4. Markup html structure. Using data-id attribute to match items in collections.

<ol id="content" class="grid">
  <li data-id="red">Red</li>
  <li data-id="green">Green</li>
  <li data-id="blue">Blue</li>
  <li data-id="black">Black</li>
  <li data-id="white">White</li>
  <li data-id="yellow">Yellow</li>
  <li data-id="cyan">Cyan</li>
  <li data-id="magenta">Magenta</li>    
</ol>

<ol id="data" style="display: none;">
  <li data-id="cyan">Cyan</li>
  <li data-id="magenta">Magenta</li>
  <li data-id="yellow">Yellow</li>
  <li data-id="black">Black</li>    
</ol>

5. Call the plugin with options

$("#content").quicksand($("#data > li"), 
  {
    duration: 1000,
    easing: "swing",
    attribute: "data-id",
  }
);

6. All possible parameters.

// duration (in milliseconds) of the animation effect
duration : 750,

// animation easing effect
easing : 'swing',

// attribute to recognize same items within source and dest
attribute : 'data-id',  

// 'dynamic' animates height during shuffling (slow), 'auto' adjusts it
// before or after the animation, false leaves height constant
adjustHeight : 'auto', 

// 'dynamic' animates width during shuffling (slow), 
// 'auto' adjusts it before or after the animation, false leaves width constant
adjustWidth : 'auto',   

// enable it if you're using scaling effect
useScaling : false,  

// Visual enhacement (eg. font replacement) function for cloned elements
enhancement : function(c) {}, 

selector : '> *',
atomic : false,
dx : 0,
dy : 0,
maxWidth : 0,

// disable if you want the collection of items to be replaced completely by incoming items.
retainExisting : true   

Change logs:

v1.6.0 (2017-11-10)

  • added bower.json file
  • breaking change: changed the way adjustWidth and adjustHeight settings work. false leaves these values alone (useful on responsive pages), 'call' sets it before or after the call (determined automatically), 'auto' sets them to auto

v1.5.0 (2017-11-10)

  • added package.json file and published the library as npm package
  • the plugin is now exported using Universal Module Definition
  • potentially breaking: modernized approach to CSS3 scaling, we're now using a different dependency: (jquery.transform2d.js)[jquery.transform2d.js]
  • improved jQuery compatibility, we're now compatible with 1.6.1+, 2.0+, 3.0+
  • Quicksand's cloning now includes all event handlers, making it effortless to integrate with other enhancement plugins. enhancement parameter should no longer be needed in most cases
  • fixed this scoping issue in callback function

v1.4.0 (2017-11-10)

  • detect IE versions more reliably so that we don't skip animation for capable IE versions
  • added support for animating canvas elements
  • replaced browser detection with feature detection for CSS3 scaling
  • improved compatibility so that the plugin works with jQuery 1.3+, including 1.10 and 2.0
  • fixed transform animation not animating in

2014-11-12

  • Push top and left attributes as animation (not style) attributes

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