Donation
Do you like this code ? Is it worth one or two dollars ? Any donation is appreciated !
Thank you for your support :)
Source Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>it's an illusion - interactive DHTML</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #111;
position: absolute;
width: 100%;
height: 100%;
}
#screen {
position:absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
cursor: pointer;
}
#screen img {
position: absolute;
}
#vb {
position: absolute;
border-left: #666 solid 1px;
left: 50%;
top: 10%;
height: 80%;
z-index: 1000;
}
#title {
position: absolute;
color: #fff;
font-family: arial;
font-weight: bold;
font-size: 1.5em;
text-align: center;
width: 100%;
top: 1em;
}
#credit {
position: absolute;
color: #666;
font-family: arial;
font-size: 0.8em;
width: 99%;
text-align: right;
top: 2px;
z-index: 10000;
}
a {text-decoration: none;color:#fff;}
a:hover {text-decoration: none;background:#ff8000;color:#fff;}
a:visited {text-decoration: none;color:#fff;}
a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;}
</style>
<script type="text/javascript">
// =============================================================
// ===== it's an illusion =====
// script written by Gerard Ferrandez - September 11, 2007
// http://www.dhteumeuleu.com
// =============================================================
r3d = {
///////////////////////////
spd : .03,
max : 200,
///////////////////////////
O : [],
num : 0,
down : false,
xb : 0,
yb : 0,
scr : 0,
R : 0,
N : 0,
Im : 0,
img : 0,
init : function ()
{
this.scr = document.getElementById('screen');
this.img = document.getElementById('particles').getElementsByTagName('img');
this.scr.onselectstart = function () { return false; }
this.scr.ondrag = function () { return false; }
this.scr.onmousemove = function (e)
{
if (r3d.down)
{
if (window.event) e = window.event;
var xm = e.clientX - r3d.nx;
var ym = e.clientY - r3d.ny;
if (Math.abs(xm - r3d.xb) + Math.abs(ym - r3d.yb) > r3d.img[r3d.Im % r3d.img.length].width)
{
var o;
if (r3d.N < r3d.max)
{
o = document.createElement('img');
r3d.scr.appendChild(o);
r3d.O[r3d.N % r3d.max] = o;
}
else o = r3d.O[r3d.N % r3d.max];
var i = r3d.img[r3d.Im % r3d.img.length];
if (xm < r3d.nw)
{
o.X = r3d.nw - xm;
o.c = -r3d.R - Math.PI / 2;
} else {
o.X = xm - r3d.nw;
o.c = -r3d.R + Math.PI / 2;
}
o.src = i.src;
o.w = Math.round(i.width / 2);
o.style.top = Math.round(ym - o.height / 2) + 'px';
o.style.left = "-9999px";
r3d.N++;
r3d.xb = xm;
r3d.yb = ym;
}
}
return false;
}
this.scr.onmousedown = function (e)
{
r3d.down = true;
r3d.xb = r3d.yb = -999;
return false;
}
this.scr.onmouseup = function (e)
{
r3d.down = false;
r3d.Im++;
if(r3d.N > 10) document.getElementById('title').innerHTML = "";
return false;
}
r3d.resize();
r3d.run();
},
resize : function () {
var o = r3d.scr;
r3d.nw = o.offsetWidth / 2;
for (r3d.nx = 0, r3d.ny = 0; o != null; o = o.offsetParent)
{
r3d.nx += o.offsetLeft;
r3d.ny += o.offsetTop;
}
},
run : function ()
{
r3d.R += r3d.spd;
for (var i = 0, o; o = r3d.O[i]; i++)
{
o.style.left = Math.round(r3d.nw + o.X * Math.sin(r3d.R + o.c) - o.w * .5) + 'px';
o.style.zIndex = 1000 + Math.round(2 * o.w + (Math.abs(o.X) * Math.cos(r3d.R + o.c)));
}
setTimeout(r3d.run, 32);
}
}
onload = function()
{
onresize = r3d.resize;
r3d.init();
}
</script>
</head>
<body>
<div id="screen">
<div id="title">CLICK AND DRAG TO DRAW</div>
<div id="vb"></div>
<div id="credit">
·home: <a href="http://www.dhteumeuleu.com/" target="_self" title="Interactive DHTML demos">www.dhteumeuleu.com </a>
·source: <a href="http://www.dhteumeuleu.com/colorsyntax/viewJS.php?src=rotate3D.html" target="_self" title="source code">code</a>
</div>
</div>
<div id="particles" style="visibility:hidden">
<img alt="" src="mb1.gif">
<img alt="" src="mb2.gif">
<img alt="" src="mb3.gif">
<img alt="" src="mb4.gif">
</div>
</body>
</html>
Resource Images :
../images/mb1.gif
../images/mb2.gif
../images/mb3.gif
../images/mb4.gif
Resource music/sound :
All sounds and images are credited to the respective author(s).