kissarat · April 3, 2013 14:05
diff --git a/fade-animation.html b/fade-animation.html
 <!DOCTYPE html>
 <html>
 <head>
    <title></title>
    <style type="text/css">
        #box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: #000000;
        }
    </style>
    <script type="text/javascript">
        var speed = 0,
            x = 0,
            y = 0,
            dx = 0,
            dy = 0,
            sx = 0,
            sy = 0,
            start = 0,
            finish = 0,
            //distance = 0,
            position = null,
            delta = 0,
            mouseX = 0,
            mouseY = 0,
            scale = 0.0005,
            centerX = Math.floor(screen.width/2),
            centerY = Math.floor(screen.height/2);

        function animate() {
            if (sx < 0 || sy < 0)
                sx = sy = 0;
            x = mouseX;
            y = mouseY;
        }

        var Position = function (first, second) {
            if (first instanceof Position && second instanceof Position) {
                this.x = Math.sqrt(second.x - first.x);
                this.y = Math.sqrt(second.y - first.y);
            }
            else {
                this.x = first;
                this.y = second;
            }
            Object.defineProperty(this, 'length', {
                get : function() {
                    return Math.sqrt(this.x*this.x + this.y*this.y);
                }
            });
        }

        Position.prototype = {
            countDistance : function(pos) {
                var
                        dx = this.x - pos.x,
                        dy = this.y - pos.y;
                return Math.sqrt(dx*dx + dy*dy);
            },
            move : function(first, second) {
                if (first instanceof Position) {
                    this.x = first.x;
                    this.y = first.y;
                }
                else {
                    this.x += first;
                    this.y += second;
                }
            },
            increment : function(p, a) {
                this.x += p.x * a;
                this.y += p.y * a;
            },
            decrement : function(p, a) {
                this.x -= p.x * a;
                this.y -= p.y * a;
            }

        }

        var Animation = function(start, finish) {
            this.start = start;
            this.finish = finish;
            this.position = start;
            this.speed = new Position(0, 0);
            this.acceleratoin = 0.01;
            this.distance = new Position(start, finish);
        }

        Animation.prototype = {
            fromStart : function() {
                return this.start.countDistance(this.position);
            },
            toFinish : function() {
                return this.finish.countDistance(this.position);
            },
            animate : function() {
                var self = this;
                setInterval(function() {
                    self.move.call(self);
                }, 40);
            },
            move : function() {
                var
                        fromStart = this.fromStart(),
                        toFinish = this.toFinish();
                if (toFinish > fromStart) {
                    this.speed.increment(this.distance, this.acceleratoin);
                }
                else {
                    this.speed.decrement(this.distance, this.acceleratoin);
                }
                if (this.speed.x <=0 || this.speed.y <= 0) {
                    this.speed = new Position(0, 0);
                    clearInterval(this.move);
                }
                this.position.move(this.speed);
            }
        }

        function hyperbole() {

        }

        function defineIntFromStyle(elem, prop, default_value) {
            Object.defineProperty(elem, prop, {
                get : function() {
                    return parseInt(elem.style[prop]);
                },
                set : function(value) {
                    elem.style[prop] = value + 'px';
                }
            });
            elem[prop] = default_value;
        }

        Element.prototype.defineCenter = function(prop, start, length) {
            Object.defineProperty(this, prop, {
                get : function() {
                    return this[start] + this[length]/2;
                },

                set : function(value) {
                    this[start] = value - this[length]/2;
                }
            });
        }

        Element.prototype.defineCoordinates = function() {
            defineIntFromStyle(this, 'left', 200);
            defineIntFromStyle(this, 'top', 200);
            defineIntFromStyle(this, 'width', 200);
            defineIntFromStyle(this, 'height', 200);
        }

        window.onload = function() {
            box.defineCoordinates();
            box.defineCenter('centerX', 'left', 'width');
            box.defineCenter('centerY', 'top', 'height');
            //setInterval(animate, 40);
            document.body.onmousemove = mouse_move;
        }

        function mouse_move(event) {
            if (!x) {
                x = mouseX;
                y = mouseY;
            }
            mouseX = event.clientX;
            mouseY = event.clientY;
            dx = mouseX - x;
            dy = mouseY - y;
        }


    </script>
 </head>
 <body>
 <div id="box"></div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<style type="text/css">
	#box {
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 100px;
	background-color: #000000;
	}
	</style>
	<script type="text/javascript">
	var speed = 0,
	x = 0,
	y = 0,
	dx = 0,
	dy = 0,
	sx = 0,
	sy = 0,
	start = 0,
	finish = 0,
	//distance = 0,
	position = null,
	delta = 0,
	mouseX = 0,
	mouseY = 0,
	scale = 0.0005,
	centerX = Math.floor(screen.width/2),
	centerY = Math.floor(screen.height/2);

	function animate() {
	if (sx < 0 \|\| sy < 0)
	sx = sy = 0;
	x = mouseX;
	y = mouseY;
	}

	var Position = function (first, second) {
	if (first instanceof Position && second instanceof Position) {
	this.x = Math.sqrt(second.x - first.x);
	this.y = Math.sqrt(second.y - first.y);
	}
	else {
	this.x = first;
	this.y = second;
	}
	Object.defineProperty(this, 'length', {
	get : function() {
	return Math.sqrt(this.xthis.x + this.ythis.y);
	}
	});
	}

	Position.prototype = {
	countDistance : function(pos) {
	var
	dx = this.x - pos.x,
	dy = this.y - pos.y;
	return Math.sqrt(dxdx + dydy);
	},
	move : function(first, second) {
	if (first instanceof Position) {
	this.x = first.x;
	this.y = first.y;
	}
	else {
	this.x += first;
	this.y += second;
	}
	},
	increment : function(p, a) {
	this.x += p.x * a;
	this.y += p.y * a;
	},
	decrement : function(p, a) {
	this.x -= p.x * a;
	this.y -= p.y * a;
	}

	}

	var Animation = function(start, finish) {
	this.start = start;
	this.finish = finish;
	this.position = start;
	this.speed = new Position(0, 0);
	this.acceleratoin = 0.01;
	this.distance = new Position(start, finish);
	}

	Animation.prototype = {
	fromStart : function() {
	return this.start.countDistance(this.position);
	},
	toFinish : function() {
	return this.finish.countDistance(this.position);
	},
	animate : function() {
	var self = this;
	setInterval(function() {
	self.move.call(self);
	}, 40);
	},
	move : function() {
	var
	fromStart = this.fromStart(),
	toFinish = this.toFinish();
	if (toFinish > fromStart) {
	this.speed.increment(this.distance, this.acceleratoin);
	}
	else {
	this.speed.decrement(this.distance, this.acceleratoin);
	}
	if (this.speed.x <=0 \|\| this.speed.y <= 0) {
	this.speed = new Position(0, 0);
	clearInterval(this.move);
	}
	this.position.move(this.speed);
	}
	}

	function hyperbole() {

	}

	function defineIntFromStyle(elem, prop, default_value) {
	Object.defineProperty(elem, prop, {
	get : function() {
	return parseInt(elem.style[prop]);
	},
	set : function(value) {
	elem.style[prop] = value + 'px';
	}
	});
	elem[prop] = default_value;
	}

	Element.prototype.defineCenter = function(prop, start, length) {
	Object.defineProperty(this, prop, {
	get : function() {
	return this[start] + this[length]/2;
	},

	set : function(value) {
	this[start] = value - this[length]/2;
	}
	});
	}

	Element.prototype.defineCoordinates = function() {
	defineIntFromStyle(this, 'left', 200);
	defineIntFromStyle(this, 'top', 200);
	defineIntFromStyle(this, 'width', 200);
	defineIntFromStyle(this, 'height', 200);
	}

	window.onload = function() {
	box.defineCoordinates();
	box.defineCenter('centerX', 'left', 'width');
	box.defineCenter('centerY', 'top', 'height');
	//setInterval(animate, 40);
	document.body.onmousemove = mouse_move;
	}

	function mouse_move(event) {
	if (!x) {
	x = mouseX;
	y = mouseY;
	}
	mouseX = event.clientX;
	mouseY = event.clientY;
	dx = mouseX - x;
	dy = mouseY - y;
	}


	</script>
	</head>
	<body>
	<div id="box"></div>
	</body>
	</html>