#JellyBoxes
A small jQuery extension that adds a function, .jellyBoxes([options]), to any positioned (non-static), square DOM element. JellyBoxes empties the element, then fills it with a number of randomly-colored squares that animate into random positions within a diamond on setup, and on every mouseover after that.
It's probably easier to just see it in action here. It's not exactly practical, but I'd like to think it's pretty neat-looking. Important note: speed slows dramatically above a certain number of squares, so watch out.
The options it takes is a plain JavaScript object, with the following properties:
- grid: the dimensions, in number of squares, of the grid. If this is set to an odd number, display will be a full square, rather than a diamond. (default: 24)
- easing: a string indicating which easing function to use. (default: "swing")
- duration: a string or number that determines the length of the animation. (default: 800)
- density: a number between 0 and 1, representing the percentage of available positions that will be filled by squares (default: 0.6)
- borderRadius: a string to set the CSS border-radius property on all the squares (default: 20%)
- shape: a string, either "diamond" or "square". Diamond only works with even-numbered grids. (default: "diamond")
- colors: an array of colors. (defaults below)
Demo uses easing functions from the jQuery Easing Plugin.