jQuery.twinkle

Draw your visitor's attention to special parts of your website. Examples of the different effects can be experiecend in this demo. All available options are described right below.

Quick start

Twinkle at a specified element:

$(selector).twinkle();

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);

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);

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.
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
    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
}