24 ožujka 2011

3D efekti na web stranicama

22:45 by download-HR ·
Kategorije: , , , ,
3D efekti na web stranicama

Novi projekt od Mark Beasleyja pretvara 2D slike na web stranici u stereoskopske slike koje se pojavljuju tro-dimenzionalno kada ih gledate kroz crveno-plave naočale.



Posjetite neku web stranicu koja sadrži mnogo slika npr. Google Images, i u adresnoj traci zaljepite ovu Javascriptu:

javascript:(function(){%20%20%20%20var%20proxy_data_url%20%3D%20%27http%3A//duskjacket.com/333DDD/pRoXy/%27%3B%20%20%20%20%20otherlib%3Dfalse%3B%20%20%20%20function%20getScript%28url%2Csuccess%29%7B%20%20%20%20%20%20var%20script%3Ddocument.createElement%28%27script%27%29%3B%20%20%20%20%20%20script.src%3Durl%3B%20%20%20%20%20%20var%20head%3Ddocument.getElementsByTagName%28%27head%27%29%5B0%5D%2C%20%20%20%20%20%20%20%20done%3Dfalse%3B%20%20%20%20%20%20%20%20script.onload%3Dscript.onreadystatechange%20%3D%20function%28%29%7B%20%20%20%20%20%20%20if%20%28%20%21done%20%26%26%20%28%21this.readyState%20%20%20%20%20%20%20%20%20%7C%7C%20this.readyState%20%3D%3D%20%27loaded%27%20%20%20%20%20%20%20%20%20%7C%7C%20this.readyState%20%3D%3D%20%27complete%27%29%20%29%20%7B%20%20%20%20%20%20%20%20done%3Dtrue%3B%20%20%20%20%20%20%20%20success%28%29%3B%20%20%20%20%20%20%20%20script.onload%20%3D%20script.onreadystatechange%20%3D%20null%3B%20%20%20%20%20%20%20%20head.removeChild%28script%29%3B%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%7D%3B%20%20%20%20%20%20head.appendChild%28script%29%3B%20%20%20%20%20%7D%20%20%20%20%20getScript%28%27http%3A//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js%27%2Cfunction%28%29%20%7B%20%20%20%20%20%20%20%20var%20times%20%3D%200%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20showMsg%28%29%3B%20%20%20%20%20%20%20%20var%20inter%20%3D%20setInterval%28function%20%28%29%7B%20%20%20%20%20%20%20%20%20%20%20%20%20showMsg%28%29%3B%20%20%20%20%20%20%20%20%20%20%20%20%20times++%3B%20%20%20%20%20%20%20%20%20%20%20%20%20if%28times%20%3D%3D%205%29%20clearInterval%28inter%29%3B%20%20%20%20%20%20%20%20%7D%2C2000%29%3B%20%20%20%20%20%20%20%20%20return%20true%3B%20%20%20%20%20%7D%29%3B%20%20%20%20%20function%20showMsg%28%29%20%7B%20%20%20%20%20%20%20%20%20%20%20if%20%28otherlib%29%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%24jq%3DjQuery.noConflict%28%29%3B%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20function%20make%28canvas%2Cimg%29%20%7B%20%20%20%20%20%20%20%20var%20w%20%3D%20img.width%28%29%3B%20%20%20%20%20%20%20%20var%20h%20%3D%20img.height%28%29%3B%20%20%20%20%20%20%20%20var%20image%20%3D%20img%5B0%5D%3B%20%20%20%20%20%20%20%20var%20cvs%20%3D%20canvas%5B0%5D%3B%20%20%20%20%20%20%20%20cvs.width%20%3D%20w%3B%20%20%20%20%20%20%20%20cvs.height%20%3D%20h%3B%20%20%20%20%20%20%20%20var%20ctx%20%3D%20cvs.getContext%28%272d%27%29%3B%20%20%20%20%20%20%20%20ctx.drawImage%28image%2C%200%2C%200%2C%20w%2C%20h%29%3B%20%20%20%20%20%20%20%20var%20data%20%3D%20ctx.getImageData%280%2C0%2C%20w%2C%20h%29%3B%20%20%20%20%20%20%20%20var%20dataLeft%20%3D%20ctx.getImageData%280%2C0%2C%20w%2C%20h%29%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20xoffset%20%3D%202%3B%20yoffset%20%3D%204%3B%20%20%20%20%20%20%20%20for%20%28var%20i%3D%28w*yoffset%29%2Cl%3DdataLeft.data.length/4%3B%20i%3Cl%3B%20i++%29%20%7B%20%20%20%20%20%20%20%20%20%20%20%20%20if%28i%25w%20%3E%201%29%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data.data%5Bi%20*%204%5D%20%3D%20dataLeft.data%5B%20%28i%20*%204%20-%20%28xoffset*4%29%29%20-%20%28w*yoffset*4%29%5D%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20ctx.putImageData%28data%2C%200%2C%200%29%3B%20%20%20%20%7D%20%20%20%20function%20remote_host%28url%29%7B%20%20%20%20%20%20%20%20if%28url%21%3Dnull%20%26%26%20url%21%3Dwindow.location.hostname%20%26%26%20url.indexOf%28%27http%27%29%3D%3D0%29return%20true%3B%20%20%20%20%20%20%20%20else%20return%20false%3B%20%20%20%20%7D%20%20%20%20%24%28%27body%27%29.find%28%27img%27%29.each%28function%20%28indexInArray%29%7B%20%20%20%20%20%20%20%20var%20img%20%3D%20%24%28this%29%3B%20%20%20%20%20%20%20%20if%28remote_host%28img.attr%28%27src%27%29%29%29%7B%20%20%20%20%20%20%20%20%20%20%20%20%24.ajax%28%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20url%3A%20proxy_data_url%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20type%3A%20%27GET%27%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20dataType%3A%20%27jsonp%27%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20data%3A%20%7Burls%3Aimg.attr%28%27src%27%29%7D%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20async%3A%20false%2C%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20success%3A%20function%20%28data%29%7B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%28data.length%20%3D%3D%200%29%20return%20false%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20newImg%20%3D%20%24%28%27%3Cimg%3E%27%29.attr%28%27src%27%2Cdata%5B0%5D%29%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20ctx%20%3D%20%24%28%22%3Ccanvas%3E%3C/canvas%3E%22%29%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%28img.width%28%29%20%3C%3D%200%20%7C%7C%20img.height%28%29%20%3C%3D%200%29%20return%20true%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20newImg.width%28img.width%28%29%29%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20newImg.height%28img.height%28%29%29%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20make%28ctx%2CnewImg%29%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20img.replaceWith%28ctx.get%28%29%5B0%5D%29%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%7D%29%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7Delse%7B%20%20%20%20%20%20%20%20%20%20%20%20var%20ctx%20%3D%20%24%28%22%3Ccanvas%3E%3C/canvas%3E%22%29%3B%20%20%20%20%20%20%20%20%20%20%20%20if%28img.width%28%29%20%3C%3D%200%20%7C%7C%20img.height%28%29%20%3C%3D%200%29%20return%20true%3B%20%20%20%20%20%20%20%20%20%20%20%20make%28ctx%2Cimg%29%3B%20%20%20%20%20%20%20%20%20%20%20%20img.replaceWith%28ctx.get%28%29%5B0%5D%29%3B%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%7D%29%3B%20%20%20%20%7D})();

0 komentara:

Objavi komentar

Arhiva