CSS 3D 갤러리 소스
하단의 태그 중 이미지만 변경하시면 됩니다.
이미지를 클릭하시면 '클로즈업'되면서 지나갑니다.
< 예제 >
----------------- 소스 -------------------
<html>
<head>
<title>NestStep's Song' pics</title>
<style type="text/css">
#canvas {
position:absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
background: #000;
overflow: hidden;
}
#canvas img {
position: absolute;
background: #666;
overflow: hidden;
cursor: pointer;
left: 100%;
border-color: #000;
border-style: solid;
border-width: 1px;
}
#canvas span {
position: absolute;
color: #9C9;
font-family: 'courier new', typewriter, matrix, monospace;
font-size: 0px;
white-space: nowrap;
left: -1000px;
background:#010;
filter: alpha(opacity=90);
opacity:0.9;
}
</style>
<script type="text/javascript">
var O = [];
var cont = 0;
var N = 0;
var S = 0;
var img, spa;
var s = {xm:0, ym:0, nx:0, ny:0, nw:0, nh:0, cx:0, cy:0, zoom:1};
var c = {x:0, y:0, z:-40000, xt:0, yt:0, zt:0};
//////////////////////////////////////////////////////////////////////////////
function resize() {
with(document.getElementById("canvas")){
s.nx = offsetLeft;
s.ny = offsetTop;
s.nw = offsetWidth;
s.nh = offsetHeight;
s.zoom = s.nh / 700;
}
}
onresize = resize;
document.onmousemove = function(e){
if(window.event) e=window.event;
s.xm = (e.x || e.clientX) - s.nx - s.nw * .5;
s.ym = (e.y || e.clientY) - s.ny - s.nh * .5;
}
function CObj(n){
this.n = n;
this.x = s.zoom * Math.random() * s.nw * 2 - s.nw;
this.y = s.zoom * Math.random() * s.nh * 2 - s.nh;
this.z = Math.round(n * (10000 / N));
this.w = img[n].width;
this.h = img[n].height;
this.oxt = spa[n];
this.txt = spa[n].innerHTML;
this.oxt.innerHTML = "";
this.obj = img[n];
this.obj.parent = this;
this.obj.onclick = new Function("this.parent.click();");
this.obj.ondrag = new Function("return false;");
this.oxt.style.zIndex = this.obj.style.zIndex = Math.round(1000000 - this.z);
this.F = false;
this.CF = 100;
this.anim = function(){
with(this){
var f = 700 + z - c.z;
if (f > 0) {
var d = 1000 / f;
var X = s.nw * .5 + ((x - c.x - s.cx) * d);
var Y = s.nh * .5 + ((y - c.y - s.cy) * d);
var W = d * w * s.zoom;
var H = d * h * s.zoom;
with(obj.style){
left = Math.round(X - W * .5)+"px";
top = Math.round(Y - H * .5)+"px";
width = Math.round(W)+"px";
height = Math.round(H)+"px";
}
with(oxt.style){
visibility = (CF-- > 0 && Math.random() > .9)?"hidden":"visible";
left = Math.round(X - W * .5)+"px";
top = Math.round(Y + H * .5)+"px";
if((c.zt - c.z) < 20){
if(!F){
F = true;
CF = Math.random() * 200;
fontSize = 1 + Math.round(d * 20 * s.zoom)+"px";
var T = "";
var tn = txt.length;
for(var i=0; i<tn; i++){
T+=txt.charAt(i);
setTimeout('O['+n+'].oxt.innerHTML = "'+(T+"_")+'";', Math.round(f/5)+16*i);
}
}
} else F=false, oxt.innerHTML="";
}
} else {
x = s.zoom * Math.random() * s.nw * 2 - s.nw;
y = s.zoom * Math.random() * s.nh * 2 - s.nh;
z += 10000;
oxt.style.zIndex = obj.style.zIndex = Math.round(1000000 - z);
}
}
}
this.click = function(){
with(this){
if(S!=this){
c.xt = x;
c.yt = y;
c.zt = z;
S = this;
} else {
S = 0;
c.zt += 1600;
}
}
}
}
function run(){
s.cx += (s.xm - s.cx) / 10;
s.cy += (s.ym - s.cy) / 10;
c.x += (c.xt - c.x) / 20;
c.y += (c.yt - c.y) / 20;
c.z += (c.zt - c.z) / 20;
for(var i=0; i<N; i++) O[i].anim();
setTimeout("run();", 16);
}
onload = function() {
resize();
s.cx = s.nw / 2;
s.cy = s.nh / 2;
cont = document.getElementById("canvas");
img = document.getElementById("canvas").getElementsByTagName("img");
spa = document.getElementById("canvas").getElementsByTagName("span");
N = img.length;
for(var i=0; i<N; i++) O[i] = new CObj(i);
run();
O[0].click();
}
</script>
</head>
<body>
<div id="canvas">
<img src="http://cbingoimage.naver.com/data2/bingo_12/imgbingo_26/kmy0nagayo/24493/kmy0nagayo_10.jpg"><span>hi~~~~~~</span>
<img src="http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data21/2007/3/18/141/desting7_17.jpg"><span>Welcome to www.uplusweb.co.kr</span>
<img src="http://cbingoimage.naver.com/data3/bingo_82/imgbingo_29/mony87/29907/mony87_87.jpg"><span>Oh~~~~</span>
<img src="http://cbingoimage.naver.com/data3/bingo_5/imgbingo_45/tok888/24617/tok888_118.jpg"><span>Welcome</span>
<img src="http://cbingoimage.naver.com/data/bingo_92/imgbingo_92/kinisky/29847/kinisky_37.jpg"><span>llll</span>
<img src="http://cbingoimage.naver.com/data3/bingo_98/imgbingo_84/windyemail/30864/windyemail_13.jpg"><span>ttt</span>
<img src="http://cbingoimage.naver.com/data3/bingo_5/imgbingo_99/hanb5/29359/hanb5_12.jpg"><span>ttt</span>
<img src="http://cbingoimage.naver.com/data3/bingo_56/imgbingo_91/seulkee0926/37699/seulkee0926_27.jpg"><span>jjj</span>
<img src="http://cbingoimage.naver.com/data3/bingo_40/imgbingo_79/sashin60/37578/sashin60_4.jpg"><span>qqqqq</span>
<img src="http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data24/2006/5/30/192/%BC%DB%C7%FD%B1%B36.jpg"><span>aaaa</span>
<img src="http://cbingoimage.naver.com/data2/bingo_73/imgbingo_23/jomatt87/16032/jomatt87_4.jpg"><span>sss</span>
<img src="http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data8/2005/2/28/25/song.jpg"><span>ssssssssssss</span>
<img src="http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data7/2005/2/28/61/n2o_1412_59770_1.jpg"><span>ssssssssssss</span>
<img src="http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data8/2005/2/28/296/haegyo.jpg"><span>ssssssssssss</span>
<img src="http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data8/2005/2/28/28/17.jpg"><span>ssssssssssss</span>
<img src="http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data7/2005/2/28/297/41808-jinistars.jpg"><span>ssssssssssss</span>
</div>
</body>
</html>
------------ 소스 끝 -----------------------
댓글 2개
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 1830 |
갈색야생마
|
17년 전 | 2845 | |
| 1829 |
갈색야생마
|
17년 전 | 1590 | |
| 1828 |
갈색야생마
|
17년 전 | 1346 | |
| 1827 |
갈색야생마
|
17년 전 | 2014 | |
| 1826 |
갈색야생마
|
17년 전 | 1462 | |
| 1825 |
갈색야생마
|
17년 전 | 1404 | |
| 1824 |
갈색야생마
|
17년 전 | 1348 | |
| 1823 |
갈색야생마
|
17년 전 | 1557 | |
| 1822 |
갈색야생마
|
17년 전 | 2046 | |
| 1821 |
갈색야생마
|
17년 전 | 1427 | |
| 1820 |
갈색야생마
|
17년 전 | 1404 | |
| 1819 |
갈색야생마
|
17년 전 | 1208 | |
| 1818 |
갈색야생마
|
17년 전 | 1440 | |
| 1817 |
갈색야생마
|
17년 전 | 1167 | |
| 1816 |
갈색야생마
|
17년 전 | 1298 | |
| 1815 |
갈색야생마
|
17년 전 | 1556 | |
| 1814 |
갈색야생마
|
17년 전 | 1390 | |
| 1813 |
갈색야생마
|
17년 전 | 1291 | |
| 1812 |
갈색야생마
|
17년 전 | 1261 | |
| 1811 |
갈색야생마
|
17년 전 | 1378 | |
| 1810 |
갈색야생마
|
17년 전 | 1152 | |
| 1809 |
갈색야생마
|
17년 전 | 1204 | |
| 1808 |
갈색야생마
|
17년 전 | 1237 | |
| 1807 |
갈색야생마
|
17년 전 | 1311 | |
| 1806 |
갈색야생마
|
17년 전 | 1335 | |
| 1805 |
갈색야생마
|
17년 전 | 1339 | |
| 1804 |
갈색야생마
|
17년 전 | 1302 | |
| 1803 |
갈색야생마
|
17년 전 | 1625 | |
| 1802 | 17년 전 | 2956 | ||
| 1801 | 17년 전 | 3354 | ||
| 1800 | 17년 전 | 1448 | ||
| 1799 | 17년 전 | 1546 | ||
| 1798 | 17년 전 | 1362 | ||
| 1797 | 17년 전 | 2116 | ||
| 1796 | 17년 전 | 3032 | ||
| 1795 | 17년 전 | 1374 | ||
| 1794 | 17년 전 | 1361 | ||
| 1793 |
갈색야생마
|
17년 전 | 1360 | |
| 1792 |
갈색야생마
|
17년 전 | 1221 | |
| 1791 |
갈색야생마
|
17년 전 | 1411 | |
| 1790 |
갈색야생마
|
17년 전 | 1469 | |
| 1789 |
갈색야생마
|
17년 전 | 1279 | |
| 1788 |
갈색야생마
|
17년 전 | 2563 | |
| 1787 |
갈색야생마
|
17년 전 | 1312 | |
| 1786 |
갈색야생마
|
17년 전 | 1586 | |
| 1785 |
갈색야생마
|
17년 전 | 1458 | |
| 1784 |
갈색야생마
|
17년 전 | 1767 | |
| 1783 |
갈색야생마
|
17년 전 | 1787 | |
| 1782 | 17년 전 | 1803 | ||
| 1781 | 17년 전 | 1848 | ||
| 1780 | 17년 전 | 1510 | ||
| 1779 | 17년 전 | 1599 | ||
| 1778 |
갈색야생마
|
17년 전 | 1512 | |
| 1777 |
갈색야생마
|
17년 전 | 1857 | |
| 1776 |
갈색야생마
|
17년 전 | 1759 | |
| 1775 |
갈색야생마
|
17년 전 | 1555 | |
| 1774 |
갈색야생마
|
17년 전 | 1735 | |
| 1773 |
갈색야생마
|
17년 전 | 1404 | |
| 1772 |
갈색야생마
|
17년 전 | 1637 | |
| 1771 |
갈색야생마
|
17년 전 | 1951 | |
| 1770 |
갈색야생마
|
17년 전 | 2784 | |
| 1769 | 17년 전 | 1994 | ||
| 1768 | 17년 전 | 1402 | ||
| 1767 | 17년 전 | 1944 | ||
| 1766 | 17년 전 | 2401 | ||
| 1765 | 17년 전 | 1560 | ||
| 1764 | 17년 전 | 2318 | ||
| 1763 |
sini117
|
17년 전 | 1754 | |
| 1762 |
sini117
|
17년 전 | 1456 | |
| 1761 |
nooree
|
17년 전 | 1316 | |
| 1760 | 17년 전 | 1992 | ||
| 1759 | 17년 전 | 2882 | ||
| 1758 | 17년 전 | 2500 | ||
| 1757 | 17년 전 | 1522 | ||
| 1756 | 17년 전 | 2871 | ||
| 1755 | 17년 전 | 2406 | ||
| 1754 | 17년 전 | 2751 | ||
| 1753 | 17년 전 | 2764 | ||
| 1752 | 17년 전 | 2548 | ||
| 1751 | 17년 전 | 2365 | ||
| 1750 | 17년 전 | 1721 | ||
| 1749 | 17년 전 | 2455 | ||
| 1748 | 17년 전 | 3956 | ||
| 1747 |
 10년째초짜 |
17년 전 | 1829 | |
| 1746 | 17년 전 | 3909 | ||
| 1745 | 17년 전 | 1840 | ||
| 1744 | 17년 전 | 1732 | ||
| 1743 | 17년 전 | 2068 | ||
| 1742 | 17년 전 | 2474 | ||
| 1741 | 17년 전 | 1424 | ||
| 1740 | 17년 전 | 1772 | ||
| 1739 | 17년 전 | 2333 | ||
| 1738 | 17년 전 | 1809 | ||
| 1737 | 17년 전 | 1765 | ||
| 1736 | 17년 전 | 1541 | ||
| 1735 | 17년 전 | 1385 | ||
| 1734 | 17년 전 | 1342 | ||
| 1733 | 17년 전 | 1159 | ||
| 1732 | 17년 전 | 1146 | ||
| 1731 | 17년 전 | 1174 |
![http://cbingoimage.naver.com/data2/bingo_12/imgbingo_26/kmy0nagayo/24493/kmy0nagayo_10.jpg"><span>hi~~~~~~</span](http://cbingoimage.naver.com/data2/bingo_12/imgbingo_26/kmy0nagayo/24493/kmy0nagayo_10.jpg"><span>hi~~~~~~</span){kind=link}
![http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data21/2007/3/18/141/desting7_17.jpg"><span>Welcome](http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data21/2007/3/18/141/desting7_17.jpg"><span>Welcome){kind=link}
![http://cbingoimage.naver.com/data3/bingo_82/imgbingo_29/mony87/29907/mony87_87.jpg"><span>Oh~~~~</span](http://cbingoimage.naver.com/data3/bingo_82/imgbingo_29/mony87/29907/mony87_87.jpg"><span>Oh~~~~</span){kind=link}
![http://cbingoimage.naver.com/data3/bingo_5/imgbingo_45/tok888/24617/tok888_118.jpg"><span>Welcome</span](http://cbingoimage.naver.com/data3/bingo_5/imgbingo_45/tok888/24617/tok888_118.jpg"><span>Welcome</span){kind=link}
![http://cbingoimage.naver.com/data/bingo_92/imgbingo_92/kinisky/29847/kinisky_37.jpg"><span>llll</span](http://cbingoimage.naver.com/data/bingo_92/imgbingo_92/kinisky/29847/kinisky_37.jpg"><span>llll</span){kind=link}
![http://cbingoimage.naver.com/data3/bingo_98/imgbingo_84/windyemail/30864/windyemail_13.jpg"><span>ttt</span](http://cbingoimage.naver.com/data3/bingo_98/imgbingo_84/windyemail/30864/windyemail_13.jpg"><span>ttt</span){kind=link}
![http://cbingoimage.naver.com/data3/bingo_5/imgbingo_99/hanb5/29359/hanb5_12.jpg"><span>ttt</span](http://cbingoimage.naver.com/data3/bingo_5/imgbingo_99/hanb5/29359/hanb5_12.jpg"><span>ttt</span){kind=link}
![http://cbingoimage.naver.com/data3/bingo_56/imgbingo_91/seulkee0926/37699/seulkee0926_27.jpg"><span>jjj</span](http://cbingoimage.naver.com/data3/bingo_56/imgbingo_91/seulkee0926/37699/seulkee0926_27.jpg"><span>jjj</span){kind=link}
![http://cbingoimage.naver.com/data3/bingo_40/imgbingo_79/sashin60/37578/sashin60_4.jpg"><span>qqqqq</span](http://cbingoimage.naver.com/data3/bingo_40/imgbingo_79/sashin60/37578/sashin60_4.jpg"><span>qqqqq</span){kind=link}
![http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data24/2006/5/30/192/%BC%DB%C7%FD%B1%B36.jpg"><span>aaaa</span](http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data24/2006/5/30/192/%BC%DB%C7%FD%B1%B36.jpg"><span>aaaa</span){kind=link}
![http://cbingoimage.naver.com/data2/bingo_73/imgbingo_23/jomatt87/16032/jomatt87_4.jpg"><span>sss</span](http://cbingoimage.naver.com/data2/bingo_73/imgbingo_23/jomatt87/16032/jomatt87_4.jpg"><span>sss</span){kind=link}
![http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data8/2005/2/28/25/song.jpg"><span>ssssssssssss</span](http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data8/2005/2/28/25/song.jpg"><span>ssssssssssss</span){kind=link}
![http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data7/2005/2/28/61/n2o_1412_59770_1.jpg"><span>ssssssssssss</span](http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data7/2005/2/28/61/n2o_1412_59770_1.jpg"><span>ssssssssssss</span){kind=link}
![http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data8/2005/2/28/296/haegyo.jpg"><span>ssssssssssss</span](http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data8/2005/2/28/296/haegyo.jpg"><span>ssssssssssss</span){kind=link}
![http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data8/2005/2/28/28/17.jpg"><span>ssssssssssss</span](http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data8/2005/2/28/28/17.jpg"><span>ssssssssssss</span){kind=link}
![http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data7/2005/2/28/297/41808-jinistars.jpg"><span>ssssssssssss</span](http://cafe.naver.com/ViewImage.nhn?img=http://cafefiles.naver.net/data7/2005/2/28/297/41808-jinistars.jpg"><span>ssssssssssss</span){kind=link}
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기