Your IP : 216.73.216.249
/*
* jQuery.twinkle 0.2
* http://larsjung.de/twinkle
*
* provided under the terms of the MIT License
*/
( function( $ ) {
var TwinkleEvent = function ( offX, offY, element, posX, posY ) {
this.offset = { "left": offX, "top": offY };
this.element = element;
this.position = { "left": posX, "top": posY };
};
var Twinkler = function () {
this.defaults = {
"widthRatio": 0.5,
"heightRatio": 0.5,
"delay": 0,
"gap": 0,
"effect": "splash",
"effectOptions": undefined
};
this.effects = {};
this.twinkle = function ( event, options ) {
var settings = $.extend( {}, this.defaults, options );
var effect = this.effects[settings.effect];
if ( effect !== undefined ) {
event.element = event.element || "body";
effect.run( event, settings.effectOptions );
};
};
this.twinkleAtElement = function ( htmlElement, options ) {
var settings = $.extend( {}, this.defaults, options );
var $ele = $( htmlElement );
var off = $ele.offset();
var offX = off.left + $ele.outerWidth( true ) * settings.widthRatio;
var offY = off.top + $ele.outerHeight( true ) * settings.heightRatio;
var pos = $ele.position();
var posX = pos.left + $ele.outerWidth( true ) * settings.widthRatio;
var posY = pos.top + $ele.outerHeight( true ) * settings.heightRatio;
var event = new TwinkleEvent( offX, offY, htmlElement, posX, posY );
this.twinkle( event, options );
};
this.twinkleAtElements = function ( htmlElements, options ) {
var THIS = this;
var settings = $.extend( {}, this.defaults, options );
var delay = settings.delay;
$( htmlElements ).each( function () {
var htmlElement = this;
setTimeout( function () {
THIS.twinkleAtElement( htmlElement, options );
}, delay );
delay += settings.gap;
} );
};
};
var twinkler = new Twinkler();
var namespace = "twinkle";
var globals = {
twinkle: function ( element, left, top, options ) {
var event = new TwinkleEvent( 0, 0, element, left, top );
twinkler.twinkle( event, options );
return globals;
},
add: function ( effect ) {
if ( twinkler.effects[effect.id] === undefined ) {
twinkler.effects[effect.id] = effect;
};
return globals;
},
remove: function ( effect ) {
if ( twinkler.effects[effect.id] !== undefined ) {
delete twinkler.effects[effect.id];
};
return globals;
}
};
var methods = {
twinkle: function ( options ) {
twinkler.twinkleAtElements( this, options );
return this;
}
};
$[namespace] = globals;
$.fn[namespace] = function( method ) {
if ( methods[method] ) {
return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ) );
} else if ( method === undefined || method instanceof Object ) {
return methods.twinkle.apply( this, arguments );
} else {
$.error( "Method " + method + " does not exist on jQuery." + namespace );
};
};
} )( jQuery );
/*
* jQuery.twinkle 0.2
* CSS Effects
* http://larsjung.de/twinkle
*
* provided under the terms of the MIT License
*/
( function( $ ) {
function animation( css, event, settings ) {
var $dot = $( "<div />" ).css( css ).appendTo( event.element );
var fadeIn = function() {
$dot.animate(
{
"left": event.position.left - settings.radius * 0.5,
"top": event.position.top - settings.radius * 0.5,
"width": settings.radius,
"height": settings.radius,
"opacity": 1
},
settings.duration * 0.5,
"linear",
fadeOut
);
};
var fadeOut = function () {
$dot.animate(
{
"left": event.position.left - settings.radius,
"top": event.position.top - settings.radius,
"width": settings.radius * 2,
"height": settings.radius * 2,
"opacity": 0
},
settings.duration * 0.5,
"linear",
cleanUp
);
};
var cleanUp = function () {
$dot.remove();
};
fadeIn();
};
var SplashEffect = function () {
var defaults = {
"color": "rgba(255,0,0,0.5)",
"radius": 300,
"duration": 1000
};
this.id = "splash-css";
this.run = function ( event, options ) {
var settings = $.extend( {}, defaults, options );
var css = {
"position": "absolute",
"z-index": 1000,
"display": "block",
"border-radius": settings.radius,
"background-color": settings.color,
"box-shadow": "0 0 30px " + settings.color,
"left": event.position.left,
"top": event.position.top,
"width": 0,
"height": 0,
"opacity": 0.4
};
animation( css, event, settings );
};
};
var DropEffect = function () {
var drops = new DropsEffect();
this.id = "drop-css";
this.run = function ( event, options ) {
drops.run( event, $.extend( options, { count: 1 } ) );
};
};
var DropsEffect = function () {
var defaults = {
"color": "rgba(255,0,0,0.5)",
"radius": 300,
"duration": 1000,
"width": 2,
"count": 3,
"delay": 300
};
this.id = "drops-css";
this.run = function ( event, options ) {
var settings = $.extend( {}, defaults, options );
var css = {
"position": "absolute",
"z-index": 1000,
"display": "block",
"border-radius": settings.radius,
"border": "" + settings.width + "px solid " + settings.color,
"left": event.position.left,
"top": event.position.top,
"width": 0,
"height": 0,
"opacity": 0.4
};
var delay = 0;
for ( var i = 0; i < settings.count; i++ ) {
setTimeout( function () {
animation( css, event, settings );
}, delay );
delay += settings.delay;
};
};
};
$.twinkle.add( new SplashEffect() );
$.twinkle.add( new DropEffect() );
$.twinkle.add( new DropsEffect() );
} )( jQuery );
/*
* jQuery.twinkle 0.2
* Canvas Effects
* http://larsjung.de/twinkle
*
* provided under the terms of the MIT License
*/
( function( $ ) {
var Interpolator = function ( values ) {
var equiDist = function( values ) {
var dist = 1 / ( values.length - 1 );
var points = [];
for ( var i = 0; i < values.length; i++ ) {
points.push( { x: dist * i , y: values[i] } );
};
return points;
};
var interpolate = function ( p1, p2, x ) {
var m = ( p2.y - p1.y ) / ( p2.x - p1.x );
var y = p1.y + m * ( x - p1.x );
return y;
};
var findSection = function ( x ) {
for ( var i = 0; i < points.length; i++ ) {
if ( i === 0 ) {
continue;
};
var prev = points[i-1];
var current = points[i];
if ( x >= prev.x && x <= current.x ) {
return [ prev, current ];
};
};
return undefined;
};
var points = equiDist( values );
this.get = function ( x ) {
x = Math.max( 0, Math.min( 1, x ) );
var secPts = findSection( x );
return interpolate( secPts[0], secPts[1], x );
};
};
Interpolator.scale = function ( x, scale, offset ) {
scale = scale || 1;
offset = offset || 0;
x = ( x - offset ) / scale;
return x >= 0 && x <= 1 ? x : undefined;
};
var FrameEvent = function ( ctx, frac, millis ) {
this.ctx = ctx;
this.frac = frac;
this.millis = millis;
};
var CanvasEffect = function ( twinkleEvent, width, height, frame ) {
this.element = twinkleEvent.element;
this.x = twinkleEvent.position.left;
this.y = twinkleEvent.position.top;
this.width = width;
this.height = height;
this.frame = frame;
this.$canvas = undefined;
this.ctx = undefined;
this.init = function () {
var css = {
"position": "absolute",
"z-index": 1000,
"display": "block",
"left": this.x - this.width * 0.5,
"top": this.y - this.height * 0.5,
"width": this.width,
"height": this.height
};
this.$canvas = $( "<canvas width='" + this.width + "' height='" + this.height + "' />" ).css( css ).appendTo( this.element );
this.ctx = new Ctx( this.$canvas.get( 0 ).getContext( "2d" ) );
};
this.destroy = function () {
this.$canvas.remove();
this.$canvas = undefined;
this.ctx = undefined;
};
this.run = function ( duration, fps ) {
this.init();
var THIS = this;
var frameCount = duration / 1000 * fps;
var delta = 1 / frameCount;
for ( var i = 0; i < frameCount + 1; i++ ) {
( function ( frac ) {
setTimeout( function () {
if ( THIS.ctx ) {
THIS.frame( new FrameEvent( THIS.ctx, frac, duration * frac ) );
};
}, duration * frac );
} )( i * delta );
};
setTimeout( $.proxy( this.destroy, this ), duration );
};
};
var Path = function ( ctx ) {
var context = ctx.context;
context.beginPath();
this.circle = function ( x, y, radius ) {
context.arc( x, y, radius, 0, 2 * Math.PI, false );
return this;
};
this.stroke = function ( strokeWidth, strokeStyle ) {
context.lineWidth = strokeWidth;
context.strokeStyle = strokeStyle;
context.stroke();
return ctx;
};
this.fill = function ( fillStyle ) {
context.fillStyle = fillStyle;
context.fill();
return ctx;
};
this.draw = function ( strokeWidth, strokeStyle, fillStyle ) {
this.stroke( strokeWidth, strokeStyle );
this.fill( fillStyle );
return ctx;
};
};
var Ctx = function ( context ) {
this.context = context;
this.width = $( context.canvas ).width();
this.height = $( context.canvas ).height();
this.clear = function () {
this.resetTransform();
this.context.clearRect( 0, 0, this.width, this.height );
return this;
};
this.resetTransform = function () {
this.context.setTransform( 1, 0, 0, 1, 0, 0 );
return this;
};
this.translate = function ( x, y ) {
this.context.translate( x, y );
return this;
};
this.rotate = function ( alpha ) {
this.context.rotate( Math.PI * alpha / 180 );
return this;
};
this.opacity = function ( opacity ) {
this.context.globalAlpha = opacity;
return this;
};
this.path = function () {
return new Path( this );
};
};
var SplashEffect = function () {
var defaults = {
"color": "rgba(255,0,0,0.5)",
"radius": 300,
"duration": 1000
};
this.id = "splash";
this.run = function ( twinkleEvent, options ) {
var settings = $.extend( {}, defaults, options );
var size = settings.radius * 2;
var opacityIpl = new Interpolator( [ 0.4, 1, 0 ] );
var radiusIpl = new Interpolator( [ 0, settings.radius ] );
var frame = function ( frameEvent ) {
var radius = radiusIpl.get( frameEvent.frac );
var opacity = opacityIpl.get( frameEvent.frac );
this.ctx
.clear()
.opacity( opacity )
.path()
.circle( this.width * 0.5, this.height * 0.5, radius )
.fill( settings.color );
};
new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
};
};
$.twinkle.add( new SplashEffect() );
var DropEffect = function () {
var defaults = {
"color": "rgba(255,0,0,0.5)",
"radius": 300,
"duration": 1000,
"width": 2
};
this.id = "drop";
this.run = function ( twinkleEvent, options ) {
var settings = $.extend( {}, defaults, options );
var size = settings.radius * 2;
var opacityIpl = new Interpolator( [ 0.4, 1, 0 ] );
var radiusIpl = new Interpolator( [ 0, settings.radius ] );
var frame = function ( frameEvent ) {
var radius = radiusIpl.get( frameEvent.frac );
var opacity = opacityIpl.get( frameEvent.frac );
this.ctx
.clear()
.opacity( opacity )
.path()
.circle( this.width * 0.5, this.height * 0.5, radius )
.stroke( settings.width, settings.color );
};
new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
};
};
$.twinkle.add( new DropEffect() );
var DropsEffect = function () {
var defaults = {
"color": "rgba(255,0,0,0.5)",
"radius": 300,
"duration": 1000,
"width": 2,
"count": 3,
"delay": 100
};
this.id = "drops";
this.run = function ( twinkleEvent, options ) {
var settings = $.extend( {}, defaults, options );
var size = settings.radius * 2;
var opacityIpl = new Interpolator( [ 0.4, 1, 0 ] );
var radiusIpl = new Interpolator( [ 0, settings.radius ] );
var scale = ( settings.duration - ( settings.count - 1 ) * settings.delay ) / settings.duration;
var offset = settings.delay / settings.duration;
var frame = function ( frameEvent ) {
this.ctx.clear();
for ( var i = 0; i < settings.count; i++ ) {
var frac = Interpolator.scale( frameEvent.frac, scale, offset * i );
if ( frac !== undefined ) {
var radius = radiusIpl.get( frac );
var opacity = opacityIpl.get( frac );
this.ctx
.opacity( opacity )
.path()
.circle( this.width * 0.5, this.height * 0.5, radius )
.stroke( settings.width, settings.color );
};
};
};
new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
};
};
$.twinkle.add( new DropsEffect() );
var PulseEffect = function () {
var defaults = {
"color": "rgba(255,0,0,0.5)",
"radius": 100,
"duration": 3000
};
this.id = "pulse";
this.run = function ( twinkleEvent, options ) {
var settings = $.extend( {}, defaults, options );
var size = settings.radius * 2;
var opacityIpl = new Interpolator( [ 0, 1, 0.6, 1, 0.6, 1, 0 ] );
var radiusIpl = new Interpolator( [ 0, settings.radius, settings.radius * 0.6, settings.radius, settings.radius * 0.6, settings.radius, 0 ] );
var frame = function ( frameEvent ) {
var x = this.width * 0.5;
var y = this.height * 0.5;
var radius = radiusIpl.get( frameEvent.frac );
var opacity = opacityIpl.get( frameEvent.frac );
this.ctx
.clear()
.opacity( opacity )
.path()
.circle( this.width * 0.5, this.height * 0.5, radius )
.fill( settings.color );
};
new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
};
};
$.twinkle.add( new PulseEffect() );
var OrbitEffect = function () {
var defaults = {
"color": "rgba(255,0,0,0.5)",
"radius": 100,
"duration": 3000,
"satellites": 10,
"satellitesRadius": 10,
"circulations": 1.5
};
this.id = "orbit";
this.run = function ( twinkleEvent, options ) {
var settings = $.extend( {}, defaults, options );
var size = settings.radius * 2;
var opacityIpl = new Interpolator( [ 0.4, 1, 1, 0.4 ] );
var r = settings.radius - settings.satellitesRadius;
var radiusIpl = new Interpolator( [ 0, r, r, 0 ] );
var frame = function ( frameEvent ) {
var radius = radiusIpl.get( frameEvent.frac );
var opacity = opacityIpl.get( frameEvent.frac );
var bog = Math.PI * 2 * settings.circulations * frameEvent.frac;
this.ctx
.clear()
.opacity( opacity )
.translate( this.width * 0.5, this.height * 0.5 );
var path = this.ctx.path();
for ( var i = 0; i < settings.satellites; i++ ) {
bog += Math.PI * 2 / settings.satellites;
var x = Math.cos( bog ) * radius;
var y = Math.sin( bog ) * radius;
path.circle( x, y, settings.satellitesRadius );
};
path.fill( settings.color );
};
new CanvasEffect( twinkleEvent, size, size, frame ).run( settings.duration, 25 );
};
};
$.twinkle.add( new OrbitEffect() );
} )( jQuery );