• unexpected toy
  • He was only five, my little angel. In his right hand this unexpected toy he collected from the floor. He had dropped the mercury thermometer...
  • 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();
    
    © www.dhteumeuleu.com 2004-2015