Fun with jQuery Shuffling

I was working on this for a portfolio thingy and just really liked the results. Made it into a jQuery plugin that allows for random sizes, easing, and draggable items (using jQuery-UI). Enjoy.

Demo:

Everybody do the jQ-Shuffle!

Implementation:

Just include jQuery, Easing & UI-Draggable (Optional), and then the plugin itself.

Your HTML should be similar to this:

<ul id="shuffler">
     <li></li>
     <li></li>
     ...
</ul>

CSS something like this:

html,body { width: 100%; height: 100%; }

#shuffler { display: none; width: 100%; height: 100%; }
#shuffler li { 
  display: block;
  position: absolute;
  list-style: none;
  width: 50px;
  height: 50px;
  border: 1px solid #999;
  background: #f0f0f0;
}

Then just call the plugin:

$('#shuffler').shuffler({
  randomsize: true,
  maxsize: 200,
  minsize: 50,
  shufflespeed: 800,
  shuffler: '#shuffler_button',
  fadeinit: true,
  uidraggable: true ,
  easing: 'easeInOutQuint' 
});

That's it! The options are pretty self-explanatory, but you can play around to get a feel for what works best for you. Enjoy!