New jQuery plugin: “Fly Off Page”

This post was originally going to be a discussion of the various design patterns used when creating jQuery plugins but while making an example for that very post I got a bit too engrossed in what was only meant to be an example…

So, here is a new jQuery plugin, it’s called "Fly Off Page". It will take selected elements and make them fly (not literally) off the page in a random or pre-defined direction. Customizable options include duration (of the animation), direction, tween (extend animation) and ‘retainSpace’ which allows you to retain, disregard or animate-out the space that the specified element once took up.

You can see a demonstration here!

Avaiable directions:

Directions Graphic

Available options:

  • Duration: The amount of time (in milliseconds) over which the animation will run. For example:
    $(elem).flyOffPage({
        duration: 400 // 400 milliseconds (0.4 seconds)
    });
  • Direction: The selected element will fly off the page in this direction.
    • ‘top’, ‘right’, ‘btm’, ‘left’
    • ‘topLeft’, ‘topRight’, ‘btmLeft’, ‘btmRight’
    • ‘random’
  • Tween: You can add your own tweens to the animation. For example:
    $(elem).flyOffPage({
        tween: {
            opacity: 0
        }
    });
  • retainSpace: This can be set to true/false or an object which will be ran as an animation on the placeholder. For example:
    $(elem).flyOffPage({
        retainSpace: {
            height: 0,
            width: 0
        }
    });

Download

Note: This is only version 0.1 – there are bound to be a couple of small issues so please let me know if you notice one and I’ll release a patch as soon as possible.