Oct 07 2008

1

Mouse Ghost Decay

Category: JavascriptTags: ,

After posting Mouse Ghost I had the idea to implement a decay feature. The way this class works is a bit different from the original script, so I haven’t had time to properly refactor into a single class. I’m not sure its worth it ;-)

Anyways, enjoy.

This version is even more gaudy then the original. Much more CPU intensive. Just a proof of concept.

var MouseGhostDecay = new Class({
 
		Implements : [Options],
		points : [],
		tracepoints : [],
		garbage : [],
 
		options : {
			color : '#FF3300',
			delay : 200,
			duration : 700,
			offset : { x : -20, y : 20 },
			size : 25
		},
 
		initialize : function(options){
			this.setOptions(options);
			this.listenerBind = this.listener.bindWithEvent(this);		
			window.addEvent('mousemove',this.listenerBind);
		},
 
		remove : function(){
			window.removeEvent('mousemove',this.listenerBind);
			this.garbage.each(function(el,idx){
				this.cleanup(idx);
			},this);
		},
 
		listener : function(event){
			$clear(this.timeout);
			this.points.push($merge(event.page, {t : new Date().getTime() }));
			this.timeout = this.traceback.delay(this.options.delay,this);
		},
 
		traceback : function(){
			this.tracepoints = $A(this.points);
			this.points = [];
			this.animate();
		},
 
		animate : function(){
			var l = this.tracepoints.length;
			if(l){
				var p = this.tracepoints.shift();
 
				this.garbage[p.t] = new Element('div',{
					'styles' : {
						'position' : 'absolute',
						'top' : p.y + this.options.offset.y,
						'left' : p.x + this.options.offset.x,
						'height' : this.options.size,
						'width' : this.options.size,
						'background-color' : this.options.color
					}
				}).set('morph', { duration : this.options.duration, onComplete : this.cleanup.pass(p.t,this)} );
 
				if(l > 1) this.animate.delay((this.tracepoints[0].t - p.t),this);
 
				this.garbage[p.t].injectInside(document.body).morph({ 'opacity' : .1, 'width' : 2, 'height' : 2 });
			}
 
		},
 
		cleanup : function(idx){
			this.garbage[idx].destroy();
			delete this.garbage[idx];
		}
 
});

Tags: ,

One Response to “Mouse Ghost Decay”

  1. Krankenversicherung says:

    Excelent post. I wish good luck from Private Krankenversicherung

Leave a Reply