Selasa, 13 Maret 2012

Javascript Photo Interactive DHTML Art

Setelah sebelumnya posting tentang






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
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
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

16 komentar:

  1. Balasan
    1. seep kk... ane keduax deh... :D

      makasih komentarnya, bermanfaat sekali :))

      Hapus
  2. ente suruh kopi paste, tp di pasang script anti right click???
    zzzz...-_____-"

    BalasHapus
    Balasan
    1. hehe peace om... script anti right clicknya baru di pasang buat nge-test doank.. :D

      kan masih bisa pake edit - copy :))

      Hapus
  3. lalieur kieu ari ningali bahasa komputer teh -___-

    BalasHapus
  4. ini widget ato apaan ya?anyway pusing deh liat bgnya matrix wkwk

    BalasHapus
    Balasan
    1. ini cuma js om...

      matriknya dh berhenti tuh. abis batrenya. hehe :D

      Hapus
  5. GILA!!! Ane baru liat yg kayak gini nih sob, wuiiisss.... Canggih banget dah sob, mantep nih kode js-nya, ane coba deh, thank you very much

    BalasHapus
    Balasan
    1. hehe... just share sobat fahri...

      tuh ada updatenya lagi dan link yang lebih lengkap lagi efek2 js yang keren2nya.
      lumayan buat icip2 :D

      Hapus
  6. thanks 4 ur visitng and ur support :D

    BalasHapus
  7. OEMAR MANTAB EUY ETA EFFECT NA MANI JIGA MANDI BOLA :)

    BalasHapus
    Balasan
    1. tong sok ngaledek deuh... :))
      tapi.... seep atuh nuhun pisan kang... :)

      Hapus
  8. bagus :)
    jago neh :)
    salam kenal ;))

    BalasHapus