jQuery.twinkle

Draw your visitor's attention to special parts of your website. Examples of the different effects and options are right below.

Quick start

Twinkle at a specified element:

$(selector).twinkle();

Click!

Select an effect and add some effect options:

var options = {
        "effect": "drop",
        "effectOptions": {
            "color": "rgba(0,0,255,0.5)",
            "radius": 100
        }
};

$(selector).twinkle(options);

Click!

If multiple elements are selected it might be wanted to delay the effects. The following code triggers the effect on the first selected element after 1 second then waits 300 milliseconds each time before it triggers the effect on the next element.

var options = {
        "delay": 1000,
        "gap": 300,
        "effect": "drop"
};

$(selector).twinkle(options);

Click!...............

API

Static methods

.twinkle()

// Triggers an effect.
jQuery.twinkle.twinkle(element: HTMLElement, left: int, top: int, options: Options): jQuery.twinkle

.add()

// Adds a new effect to the list of selectable effects if effect ID is available.
jQuery.twinkle.add(effect: Effect): jQuery.twinkle

.remove()

// Removes an added effect.
jQuery.twinkle.remove(effect: Effect): jQuery.twinkle

// Removes an added effect by ID.
// <span class='since'>0.3</span>
jQuery.twinkle.remove(id: String): jQuery.twinkle

Methods

'twinkle'

// Triggers an effect.
.twinkle(['twinkle',] [options: Options]): jQuery

Objects

Options

Options {

    // position the effect horizontal inside the element
    widthRatio: 0.5

    // position the effect vertical inside the element
    heightRatio: 0.5

    // delay before the first effect is triggert
    delay: 0

    // delay between two effects
    gap: 0

    // effect ID
    effect: "splash"

    // custom effect options
    effectOptions: undefined

    // function to be called after effect finished
    // <span class='since'>0.3</span>
    callback: undefined
}

Effect

Effect {

    // an unique id, see Effects section below
    id: String

    // the function that gets triggered
    run: function(event: Event, options: EffectOptions, callback: Function)
}

Event

Event {

    // location in document space
    offset: {
        left: int
        top: int
    }

    // associated HTML element
    element: HTMLElement

    // location in element's offset parent space
    position: {
        left: int
        top: int
    }
}

Effects

jQuery.twinkle comes with some built in effects.

'splash' (canvas)

EffectOptions {
    color: "rgba(255,0,0,0.5)",
    radius: 300,
    duration: 1000
}

'drop' (canvas)

EffectOptions {
    color: "rgba(255,0,0,0.5)",
    radius: 300,
    duration: 1000,
    width: 2
}

'drops' (canvas)

EffectOptions {
    color: "rgba(255,0,0,0.5)",
    radius: 300,
    duration: 1000,
    width: 2,
    count: 3,
    delay: 100
}

'pulse' (canvas)

EffectOptions {
    color: "rgba(255,0,0,0.5)",
    radius: 100,
    duration: 3000
}

'orbit' (canvas)

EffectOptions {
    color: "rgba(255,0,0,0.5)",
    radius: 100,
    duration: 3000,
    satellites: 10,
    satellitesRadius: 10,
    circulations: 1.5
}

'splash-css' (CSS3)

EffectOptions {
    color: "rgba(255,0,0,0.5)",
    radius: 300,
    duration: 1000
}

'drop-css' (CSS3)

EffectOptions {
    color: "rgba(255,0,0,0.5)",
    radius: 300,
    duration: 1000,
    width: 2
}

'drops-css' (CSS3)

EffectOptions {
    color: "rgba(255,0,0,0.5)",
    radius: 300,
    duration: 1000,
    width: 2,
    count: 3,
    delay: 300
}