Version: 0.48

Due to lack of time I had to park development of Animify for the time being. You can still use it in it's current shape though.

PLEASE NOTE: This is an early version of the plugin - incomplete, very non-optimised and full of bugs, etc. It is highly recommended NOT to use it in production at the moment. Best viewed with Safari / Chrome (WebKit) or Firefox.

Testing and feedback most welcome.

This is an incomplete working draft which will be updated and improved as the plugin development progresses.

What is needed?

There are only 3 things required for Animify to work on your pages:

jQuery

Animify

Browser supporting <canvas> properly, with js enabled

How to use it?

It's very simple. After the plugin is included on your page, you can call it following this simple pattern: $('#some_element').Animify({'param1':'some_value','param2':'some_other_value'});

Effects

Various effects are simply enabled by specifying appropriate value for the 'effect' param. All effects are 'ready-to-go' with a range of default features making them adjust to your pages and look good without the need of any tweaking. You can however, if you want to, pass additional params to customise the look of the effects.

This article will tell you about head lice causes, symptoms and ways of treatment, so get confortable and read it!

Below is the list of currently available effects:

'effect'

'blurbubbles'To run the effect with default settings:

$('#your_element').Animify();

Effect can be modified with following params *:

background-color

item-colours

item-quantity

item-opacity

overlay

x

y-direction

delay

intro

'squares'To run the effect with default settings:

$('#your_element').Animify({'effect':'squares'});

Effect can be modified with following params *:

background-color

item-colours

item-quantity

item-opacity

overlay

delay

intro

'film-noir'To run the effect with default settings:

$('#your_element').Animify({'effect':'film-noir'});

Effect can be modified with following params *:

background-color

delay

intro

posterize

age

'grunge'To run the effect with default settings:

$('#your_element').Animify({'effect':'grunge'});

Effect can be modified with following params *:

background-color

delay

intro

Additional params

'background-color'Pretty much self explanatory - allows you to force a background colour for your animation. Values can be passed in either hex or rgb, for example #000000 or rgb(23,34,123), etc. Background colour affects the overlay.

'item-colours'

'item-quantity'Integer.

'item-opacity'0.00 - 1.00

'overlay'A canvas layer sitting on top of the actual animation. Default value for most effects is 'fade' (background-colour value is the colour faded to), can be switched off by setting it to 'none'

'y-direction'If an effect relies on moving some objects around, this param determines which way they go on the y axis. Possible values: 'default' (both), 'up', 'down'

'x'

'delay'Determines the speed of the animation. The lower the delay, the faster the animation. Takes integer value (milliseconds)