jQuery.twinkle

get the visitor's attention

0.10.0

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

Options

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

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

    // effect ID
    effect: 'splash'

    // custom effect options
    effectOptions: undefined

    // function to be called after effect finished
    callback: undefined
}

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
}
Works best with JavaScript enabled!Works best in modern browsers!