jQuery.twinkle

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

The sources and a changelog are available on GitHub.

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: <a href="#def-object-options">Options</a>): jQuery.twinkle

add

// Adds a new effect to the list of selectable effects if effect ID is available.
jQuery.twinkle.add(effect: <a href="#def-object-effect">Effect</a>): jQuery.twinkle

remove

// Removes an added effect.
jQuery.twinkle.remove(effect: <a href="#def-object-effect">Effect</a>): 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: <a href="#def-object-options">Options</a>]): 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: <a href="#def-object-event">Event</a>, 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. But it's easy to build your own effects. The built in effects are registered by unprefixed IDs, which are reserved for those effects. Please use for example IDs like mine.effect for your own effects to avoid collision with future built in effects.

splash

canvas
0.2

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

drop

canvas
0.2

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

drops

canvas
0.2

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

pulse

canvas
0.2

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

orbit

canvas
0.2

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
}

License

jQuery.twinkle is provided under the terms of the MIT License.