jQuery.twinkle
get the visitor's attention
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
}