jQuery .fly([parameters]);

jQuery Fly allows you to apply specialized animation effect to elements on your page (built specifically for text effects). It also includes pre built global effects to preform on your page.  This plugin is still in version 1, so expect plenty of updates in the future as it becomes more powerful and optimized.

To invoke the fly event on a page you first need to download it (duh) and include it in your page like so:

<script src="jquery.fly.compressed.js" type="text/javascript"></script>

You can then apply it to any page element like so:

$('p').fly();

Practical Uses

Not really sure what practical uses this has.  Maybe as a cool way to insert AJAX elements onto your page? use on of the pre-bult animations when a user completes a form (balloons?).

I’m sure someone more creative could think of ways to use this plugin.

Fly Parameters

The fly function accepts a number of parameters, these parameters are

movement:[random|explode|implode|float|fall]

• random: Makes the elements move randomly across the page
• explode: Makes the elements move from center of the screen to one of the four corners
• implode: Makes the elements move from one of the four corners to the center
• float: Makes the elements move from bottom of screen to the top
• fall: Makes the elements move from top of screen to bottom

defualt movement is ‘random’

maxRotations: [int]

maxRotations is the maximum number of times the animation will run for the elements (default is 10 times)

minRotations: [int]

minRotations is the minimum number of times the animation will run for the elements (default is 2 times)

NOTE:  For each element passed, a random value that falls between the max & min rotations will be picked, if you explicity want a specific number of rotations set these to values to the same # (example to run animation once you would set minRotations:1,maxRotations:1)

rotationSpeed:[int]

rotationSpeed is the maximum number of seconds it takes to run 1 rotation of the animation (default is 10 seconds)

rotationRandom:[true|false]

If set to ‘false’, every animation for all elements passed will be set to exactly the rotationSpeed value.  If true, then a random number of seconds between 1- rotationSpeed will be picked for each element animation. (default is true)

maxTextSize:[int][px|em|pt]

sets the max size any text contained within the passed element can grow to.  Only invoked is expandText is set to true (defualt is ’8em’).

expandText:[true|false]

If set to true all text contained in the element will grow to maxTextSize. If set to false, the text size will not change during the animation. (default is set to true)

randomColor:[true|false]

if set to true, then for each animation rotation all text within the element will be set to a random color. If false the text color remains the same. (default set to ‘false’)

reset:[true|false]

Weather or not to reset the element back to its original position and CSS settings. (defualt set to ‘true’)

destroy:[true|false]

If set to true, once all animation is completed on the element, then the element will be destroyed (removed from the page). (default is set to ‘false’)

So an example with parameters would be something like:

$('span').fly({movement:'float',maxRotations:3,minRotations:2,randomColor:true});

Built-In Effects

The extension also comes with some pre-built effects that you can evoke. You can see an example of each one here.

$.fn.fly.starfield();

The starfield effect produces a bunch of ASCII stars that fly out of the page (resembles a rough version of the windows ‘starfield’ screen saver).

$.fn.fly.explosion();

Creates a cartoony ASCII explosion from the center of the page.

$.fn.fly.blackhole();

Sucks abunch of black ASCII particles into the center of the page.

$.fn.fly.blizzard();

Produces a snowy blizzard on the page.

$.fn.fly.rain();

Produces blue raindrops on the page.

$.fn.fly.matrix();

Creates a similar text effect like in the Matrix.

$.fn.fly.fire();

Produces an ASCII fire on the page

$.fn.fly.balloons();

Makes festive ASCII balloons rise from the bottom of the page

$.fn.fly.bubbles();

Produces a bunch of blue rising bubbles on the page

Download

You can download the plugin here.  the zip includes a compressed (jquery.fly.compressed.js) and uncompressed version, as well as the most recent version of jQuery (1.2.6) and an example page.

Future Development

Since this is version 1 of this plugin, I plan on alot more development.  Some things to come:

• Optimized code
• handling of images and other elements
• move advanced controls
• move advanced animations
• move built in animation effects