Selasa, 13 Maret 2012

Javascript Photo Interactive DHTML Art

Diposting oleh RELOAD.ID di Selasa, Maret 13, 2012 Label: Share

Setelah sebelumnya posting tentang Ganti Nama Facebook Limit Update part II 2012, sekarang oeminfo pengen share Javascript Photo Interactive DHTML yang Oeminfo dapet dari share om 1puT di forum dan komunitas tercinta HN Community. Karya mengagumkan dari Gerrard Fernandez ini salah satunya Oemar dapat nemu dari blognya om-dayz. langsung aja deh pengen Oemar share di mari.

Langsung aja. check this out :

Lihat Demo Preview

Berikut adalah Source Codenya :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Javascript Photo Interactive DHTML Art</title> 
<meta name="author" content="Gerard Ferrandez"> 
<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: 0px; 
        top: 0px; 
        width: 100%; 
        height: 100%; 
        background: #000; 
    } 
    #SP { 
        position: absolute; 
        left: 50%; 
        top: 50%; 
    } 
    #screen span { 
        position: absolute; 
        left: -1000px; 
        overflow: hidden; 
    } 
    #screen img  { 
        position: absolute; 
        -ms-interpolation-mode:nearest-neighbor; 
    } 
    #credit { 
        position: absolute; 
        color: #888; 
        font-family: verdana, arial, helvetica, sans-serif; 
        font-size: 0.8em; 
        right: 1em; 
        text-align: right; 
        bottom: 2px; 
    } 
    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"> 
// ==================================================== 
// script By: Gerard Ferrandez - Ge-1-doot -

// http://www.dhteumeuleu.com/  
// ==================================================== 
 
document.onselectstart = new Function("return false"); 
 
var nx  = 0; 
var ny  = 0; 
var xm  = 0; 
var ym  = -1000000; 
var S   = 0; 
var O   = 0; 
var M   = 10; 
var H; 
var W; 
var img; 
var scr; 
 
//////////////////// 
var RAD  = 2; 
var Nx   = 12; 
var Ny   = 14; 
var visc = .01; 
//////////////////// 
 
function CObj(parent, x, y){ 
    var o = document.createElement("span"); 
    o.style.width = Math.round(W + 2) + 'px'; 
    o.style.height = Math.round(H + 2) + 'px'; 
    var i = document.createElement("img"); 
    i.src = img.src; 
    i.style.left = Math.round(-x * W) + 'px'; 
    i.style.top = Math.round(-y * H) + 'px'; 
    o.appendChild(i); 
    document.getElementById("SP").appendChild(o); 
    x = -(Nx / 2) * W + (x * W); 
    y = -(Ny / 2) * H + (y * H); 
    this.obj  = o.style; 
    this.x    = x; 
    this.y    = y; 
    this.x0   = x; 
    this.y0   = y; 
    this.parent = parent; 
} 
 
CObj.prototype.anim = function () { 
    this.dx = xm - this.x; 
    this.dy = ym - this.y; 
    var d = Math.sqrt(this.dx * this.dx + this.dy * this.dy); 
    this.x = this.x - S / d * (this.dx / d) + (this.x0 - this.x) * visc; 
    this.y = this.y - S / d * (this.dy / d) + (this.y0 - this.y) * visc; 
    this.obj.left = Math.round(this.x) + 'px'; 
    this.obj.top  = Math.round(this.y) + 'px'; 
    if(this.parent) this.parent.anim(); 
} 
 
function run(){ 
    O.anim(); 
} 
 
document.onmousemove = function(e){ 
    if (window.event) e = window.event; 
    xm = (e.x || e.clientX) - scr.offsetLeft - nx; 
    ym = (e.y || e.clientY) - scr.offsetTop - ny; 
} 
 
function resize(){ 
    nx = scr.offsetWidth * .5; 
    ny = scr.offsetHeight * .5; 
} 
onresize = resize; 
 
onload = function(){ 
    img = document.getElementById("IMG"); 
    scr = document.getElementById("screen"); 
    resize(); 
    W = img.width / Nx; 
    H = img.height / Ny; 
    S = img.width * RAD; 
    for(var y = 0; y < Ny; y++) 
        for(var x = 0; x < Nx; x++) 
            O = new CObj(O, x, y); 
    setInterval(run, 16); 
} 
</script> 
</head> 
<body> 
 
<div id="screen"> 
    <div id="SP"></div> 
    <div id="credit">Back To
    <a href="/">Home</a></div>

</div> 
 
<img id="IMG" src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/s720x720/431709_387951991217171_100000071208920_1594636_1309514408_n.jpg" alt="" style="visibility:hidden"> 

</body> 
</html>

Tinggal copas ke notepad, dan save as *.html dan ubah sesuaikan sesuai kebutuhan sobat :D

*update :
1. Interactive Text DHTML art

Lihat Demo Preview

berikut adalah source codenya :

<html>
<head>
<title>dhtml - Interactive DHTML art-demos</title>
<meta name="author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
 body {margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}
 span {position:absolute; left:-1000; font-size:14px;color:#FFF;font-family:arial;}
</style>
<script type="text/javascript"><!--
// ====================================================
// script: Gerard Ferrandez - Ge-1-doot - June 2005
// http://www.dhteumeuleu.com/
// ====================================================

window.onerror         = new Function("return true");
document.onselectstart = new Function("return false");

nx  = 0;
ny  = 0;
xm  = 0;
ym  = -1000000;
O   = 0;

/////////////
VS  = .2;
S   = 5000;
W   = 400;
H   = 320;
FX  = 1.1;
/////////////

function CObj(parent,x,y,txt){
 o = document.createElement("span");
 o.innerHTML = txt;
 document.getElementById("sp").appendChild(o);
 this.obj  = o.style;
 this.x   = x;
 this.y   = y;
 this.x0  = x;
 this.y0  = y;
 this.anim = function () {
  with(this){
   dx = xm - x;
   dy = ym - y;
   d = Math.sqrt(dx * dx + dy * dy);
   obj.left = x = x - S / d * (dx / d) + (x0 - x) * VS;
   obj.top  = y = y - S / d * (dy / d) + (y0 - y) * VS;
   if(parent)parent.anim();
  }
 }
}

function run(){
 O.anim();
 setTimeout("run()", 16);
}

document.onmousemove = function(e){
 if (window.event) e = window.event;
 xm = (e.x || e.clientX) - nx;
 ym = (e.y || e.clientY) - ny;
}

function resize(){
 nx = document.body.offsetWidth * .5;
 ny = document.body.offsetHeight * .5;
}
onresize = resize;

function fontWidth(word){
 // arial font
 var S = "a68b68c68d68e68f31g68h68i31j31k68l31m108n68o68p68q68r39s68t39u68v50w90x68y68z68A90B90C90D90E90F78G98H90I28J59K90L68M108N90O98P90Q98R90S90T68U90V90W130X68Y90Z68'30.42!29?68-41/41=72";
 var l = word.length;
 var s = 0;
 var x = 0;
 var c = 0;
 for(i=0;i<l;i++){
  c = word.charAt(i);
  x = S.indexOf(c);
  if(c>="0" && c<="9")s+=69;
  else if(x>=0)s+=parseInt(S.substring(x+1,x+4));
  else s+=68;
 }
 return s/10;
}

onload = function(){

 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 T = [
  "======== From HNCommunity - for HNCommunity ========",
  "Dynamic HTML designates a technique of creating interactive web sites",
  "by using a combination of the static markup language HTML,",
  "a client-side scripting language (such as JavaScript)",
  "and the style definition language Cascading Style Sheets.",
  "====== ====== ====== ====== ====== ======",
  "click click click click click click click click click",
  "click click click click click click click click click",
  "",
  "",
  "",
  "click click click click click click click click click",
  "click click click click click click click click click",
  "====== ====== ====== ====== ====== ======",
  "It may be used to create small applications in a web browser.",
  "Some disadvantages of DHTML are that it is difficult to develop",
  "and debug due to varying degrees of support among web browsers.",
  "Development for recent browsers, is aided by a shared",
  "======== Document Object Model. ========"
 ];

 // Replace
 var R = {"HNCommunity": "<div style='color:#FF8000'>HNCommunity</div>", "click": "<div style='color:#888'>click</div>"};
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 resize();
 x = 0;
 y = 0;
 for(j in T){
  Tx = T[j].split(" ");
  // justify
  xt = 0;
  for(i in Tx){
   txt = Tx[i];
   xt += fontWidth(txt);
  }
  if(Tx.length)sP = (W - xt) / (Tx.length-1); else sP = 0;
  // insert word
  for(i in Tx){
   txt = Tx[i];
   if(txt) {
    O = new CObj(O, -(W/2)+x, -(H/2)+y, R[txt]!=undefined?R[txt]:txt);
    x += FX*(fontWidth(txt)+sP);
   }
  }
  y += 18;
  x = 0;
 }
 // big click !!!
 O = new CObj(O, -50, -50, "<div style='font-size:48px;font-weight:bold;'>click</div>");
 run();
}
//-->
</script>
</head>
<body>
<div style="position:absolute;left:0;top:0;height:10%;width:100%;background:#111"></div>
<div style="position:absolute;left:0;top:90%;height:10%;width:100%;background:#111"></div>

<div id="sp" style="position:absolute;left:50%;top:50%"></div>

</body></html>

2. DHTML Art Photo ShowRoom

Lihat Demo Preview

berikut kode htmlnya :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>HANDPAINTING UNIK DAN LUARBIASA</title> 
<meta name="Author" content="Gerrard Fernando"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
    html { 
        overflow: hidden; 
    } 
    body { 
        background: #000; 
        width:100%; 
        height:100%; 
        margin:0; 
    } 
    #screen { 
        position: absolute; 
        width: 100%; 
        height: 100%; 
    } 

    #img { 
        visibility: hidden; 
    } 
    #screen img  { 
        position:absolute; 
        left:-10000px; 
        z-index:100; 
        -ms-interpolation-mode:nearest-neighbor; 
        image-rendering: optimizeSpeed; 
        cursor: pointer; 
        border:#333 solid 1px; 
    } 
    #tit { 
        text-align:center; 
        position:absolute; 
        color:#fff; 
        font-family:verdana; 
        font-weight:bold; 
        font-size:48px; 
        filter: alpha(opacity=30); 
        opacity: 0.3; 
        width:100%; 
        bottom:12px; 
        z-index:10000; 
    } 
</style> 
<script type="text/javascript"> 
// ======================================================= 
// script: Gerard Ferrandez - Ge-1-doot - May 22, 2004 
// Updated: February 2010 - namespaced 
// ======================================================= 


var diapo = function () { 
    var object = new Array(), 
        K  = Math.PI / 180, 
        N  = 0, 
        xm = 0, 
        ym = 0, 
        mx = 0, 
        my = 0, 
        ax = 0, 
        ay = 0, 
        Nb = 0, 
        tit = 0, 
        img = 0; 
//////////////////// 
    var zM = 4; 
//////////////////// 
    var CObj = function (N, x, y, z){ 
        var I = img.getElementsByTagName("img")[N % img.getElementsByTagName("img").length]; 
        var o = document.createElement("img"); 
        o.onclick = function () { 
            if (object[N].on == true) object[N].on = false; 
            else object[N].on = true; 
        } 
        o.onmouseover = function () { 
            if (Nb != N) { 
                Nb = N; 
                tit.innerHTML= I.alt; 
            } 
        } 
        o.onmouseout = function () { 
            Nb = -1; 
            object[N].on = false; 
        } 
        o.onmousedown = new Function("return false"); 
        o.src = I.src; 
        scr.appendChild(o); 
        this.obj  = o.style; 
        this.z    = Math.round(z * ny * .25); 
        this.x    = Math.round(x * ny * .25); 
        this.y    = Math.round(y * ny * .25); 
        this.on   = false; 
        this.zOOm = 1; 
        this.N    = N; 
    } 

    CObj.prototype.anim = function () { 
        var xP = this.z * Math.sin(mx * K) + this.x  * Math.cos(mx * K); 
        var zP = this.z * Math.cos(mx * K) - this.x  * Math.sin(mx * K); 
        var yP = this.y * Math.cos(my * K) - zP * Math.sin(my * K); 
        zP = this.y * Math.sin(my * K) + zP * Math.cos(my * K); 
        var w = (zP * .25 + ny * .25) * this.zOOm; 
        var h = w * .8; 
        if (this.on && zP > 0) { 
            if (this.zOOm < zM) this.zOOm += .05; 
        } else { 
            if (this.zOOm > 1) this.zOOm -= .025; 
        } 
        this.obj.left   = Math.round(xP + nx * .5 - w * .5) + "px"; 
        this.obj.top    = Math.round(yP + ny * .5 - h * .5) + "px"; 
        this.obj.width  = Math.round(w) + "px"; 
        this.obj.height = Math.round(h) + "px"; 
        this.obj.zIndex = Math.round(1000 + w); 
    } 

    var run = function () { 
        dx = (1 * xm) - mx; 
        dy = (1 * ym) - my; 
        mx += dx / 60; 
        my += dy / 60; 
        var i = 0, o; 
        while (o = object[i++]) o.anim(); 
        setTimeout(run, 16); 
    } 

    var resize = function () { 
        nx = scr.offsetWidth; 
        ny = scr.offsetHeight * .9; 
    } 

    var init = function () { 
        scr = document.getElementById("screen"); 
        img = document.getElementById("img"); 
        tit = document.getElementById("tit"); 
        resize(); 
        scr.onselectstart = new Function("return false"); 
        onresize = resize; 
        scr.onmousemove = function(e){ 
            if (window.event) e = window.event; 
            xm = (e.x || e.clientX); 
            ym = (e.y || e.clientY); 
        } 
        object.push( new CObj(0,1,-1,-1) ); 
        object.push( new CObj(1,1,1,-1) ); 
        object.push( new CObj(2,-1,-1,-1) ); 
        object.push( new CObj(3,-1,1,-1) ); 
        object.push( new CObj(4,1,-1,1) ); 
        object.push( new CObj(5,1,1,1) ); 
        object.push( new CObj(6,-1,-1,1) ); 
        object.push( new CObj(7,-1,1,1) ); 
        run(); 
    } 
    //////////////////////////////////////////////////////////// 
    return { 
        init : init 
    } 
}(); 

onload = function (){ 
    diapo.init(); 
} 

</script> 
</head> 

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

<div id="screen"> 
    <div id="img"> 
        <img alt="HAND PAINTING 1" src="http://lorddayz.netau.net/handpainting/1.jpg"> 
        <img alt="HAND PAINTING 2" src="http://lorddayz.netau.net/handpainting/2.jpg"> 
        <img alt="HAND PAINTING 3" src="http://lorddayz.netau.net/handpainting/3.jpg"> 
        <img alt="HAND PAINTING 4" src="http://lorddayz.netau.net/handpainting/4.jpg"> 
        <img alt="HAND PAINTING 5" src="http://lorddayz.netau.net/handpainting/5.jpg"> 
        <img alt="HAND PAINTING 6" src="http://lorddayz.netau.net/handpainting/6.jpg"> 
        <img alt="HAND PAINTING 7" src="http://lorddayz.netau.net/handpainting/7.jpg"> 
        <img alt="HAND PAINTING 8" src="http://lorddayz.netau.net/handpainting/8.jpg"> 
    </div> 
    <div id="tit" ></div>

</div> 

</body> 
</html>

lebih banyak dan lebih lengkap lagi di http://www.dhteumeuleu.com

Sekian deh. gitu aja Javascript Photo Interactive DHTML Art tuh...
just share 4 you, just archive 4 me :P