Sources
Main html file: | dhtml/lensSP.html |
ge1doot mini library: | /library/ge1doot.js |
CSS
html {
overflow: hidden;
-ms-touch-action: none;
-ms-content-zooming: none;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#screen {
position: absolute;
left: 0;
top: 0;
background: #000;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: translate3d(0,0,0);
}
#screen img {
position:absolute;
left:-1000px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
HTML
<div id="screen">
<img id="blob" src="../images/Glob1.gif">
</div>
</body>
JS
/*
* ======================================================
* http://www.dhteumeuleu.com/unexpexted-toy
* Author Gerard Ferrandez - June 12, 2004
* ---------------------------------------------------
* Released under the MIT license
* http://www.dhteumeuleu.com/LICENSE.html
* Last updated: 9 Dec 2012
* ======================================================
*/
"use strict";
(function () {
// ----- private vars -----
var objects, objNext, scr, pointer,
S = 0,
W = 0,
H = 0;
/////////////
var Ni = 48;
/////////////
// ----- particle prototype -----
var CObj = function (x, y, src) {
if (!objects) objects = this; else if (objNext) objNext.next = this;
objNext = this;
var o = document.createElement("img");
o.src = src;
scr.elem.appendChild(o);
this.obj = o.style;
this.x = x;
this.y = y;
this.x0 = x;
this.y0 = y;
};
CObj.prototype.anim = function () {
var dx = pointer.X - this.x - scr.width;
var dy = pointer.Y - this.y - scr.height;
var d = Math.sqrt(dx * dx + dy * dy);
this.x = this.x - S / d * (dx / d) + (this.x0 - this.x) * 0.5;
this.y = this.y - S / d * (dy / d) + (this.y0 - this.y) * 0.5;
this.obj.left = ((0.5 + scr.width + this.x - W) | 0) + "px";
this.obj.top = ((0.5 + scr.height + this.y - H) | 0) + "px";
if (this.next) this.next.anim();
};
// ----- resize -----
var resize = function () {
scr.width *= 0.5;
scr.height *= 0.5;
S = Math.min(scr.width, scr.height) * 20;
}
// ----- run ------
var run = function() {
objects.anim();
requestAnimFrame(run);
}
// ----- initialization -----
var init = function () {
scr = new ge1doot.Screen({
container: "screen",
resize: resize
});
scr.resize();
pointer = new ge1doot.Pointer({});
pointer.X = 100000;
scr.onselectstart = new Function("return false");
var img = document.getElementById("blob");
W = img.width * 0.5;
H = img.height * 0.5;
var A = (2 * Math.PI) / Ni;
for (var i = 0; i < Ni; i++) {
var x = W * Math.cos(A * i);
var y = H * Math.sin(A * i);
new CObj(x, y, img.src);
}
// ----- start engine -----
run();
}
return {
// ---- load -----
load : function (params) {
window.addEventListener('load', function () {
init();
}, false);
}
}
})().load();