jQuery.twinkle

get the visitor's attention

licenseMITgithublrsjng/jquery-twinklebowerlrsjng/jquery-twinkle
0.8.0

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

PRESS

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

PRESS

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

PRESS...............

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

'drop' (canvas)

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

'drops' (canvas)

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

'pulse' (canvas)

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

'orbit' (canvas)

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

'splash-css' (CSS3)

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

'drop-css' (CSS3)

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

'drops-css' (CSS3)

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