테스트 사이트 - 개발 중인 베타 버전입니다
SIR

CSS로 만든 - 3D 입체 갤러리

Nextstep
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 18년 전 · 5202 · 2


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>

------------   소스 끝  -----------------------


[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]

첨부파일

3D_입체_갤러리_song.html (6.9 KB, 297회)
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

홍성철
프로필 보기이 회원 글보기이 회원의 댓글보기
 18년 전
잘봤습니다.
웹마짱구
프로필 보기이 회원 글보기이 회원의 댓글보기
 17년 전
멋집니다.

게시글 목록

번호 제목
26573
기타 매뉴얼, 북 등의 문서 협업 / 디자인 목업
7309
반응형웹 기반 쇼핑몰 구축 (영카트 vs Cafe24 vs 고도몰) 2
19780
기타 vi 편집기에서 세로로 문자열 입력
7306
파일 업로드 권한에 관련되서 질문드립니다.. 2
28025
크로스 브라우징 하시는분들 익스 7까지 잡아주시나요? 10
28020
안드로이드 모바일에서 이미지가 흐릿하게 보이는 현상은? 4
28010
취업과정 고민 및 포트폴리오 질문드려요 9
7304
직접 만든 레이아웃이나 플러그인 등에 애드센스를 달아서 배포한다면 약관 위반이 되는걸까요? 1
7302
값 넘겨주기 input 이렇게 쓰는게 맞을까요? 1
7295
그누보드에서 phpmyadmin만 재설치가 가능한가요?? 6
7292
파이썬 관련 질문입니다. 2
7287
이번에 만들어본 푸시 클래스 입니다. 4
19779
기타 세로로 편집하기 - 꼭 필요한 기능
7284
Y a n d e x B o t ..... 비밀번호 쪽으로 1주일째 2
7279
php 서버 :: 리눅스 서버 or 윈도우 서버?? 4
7278
<개발자 모십니다> 뉴스젤리 개발자 채용 공고
28009
다음 API 주소 적용된 영카트5 이동중인데...
31753
그누보드5 그누보드5 강좌 - 갤러리스킨 만들기
31752
그누보드5 그누보드5 강좌 - 메인에 jQuery슬라이드 적용하기
7274
게시물이동관련 질문입니다. 3
31751
그누보드5 그누보드5 강좌 - 주메뉴,부메뉴 모두 가로형태 메뉴적용하기
31750
그누보드5 그누보드5 강좌 - 네비게이션적용하기
31749
그누보드5 그누보드5 강좌 - 네비게이션적용하기
31748
그누보드5 그누보드5 강좌 - 스킨적용하기
30979
기타 계륵.. css3, jquery 를 이용한 랜덤 돌림판 포인트게임
31747
그누보드5 그누보드5 강좌 - 홈페이지만들기 실전#2
28004
정말 궁금한데요... 4
31745
그누보드5 그누보드5 강좌 - 홈페이지만들기 실전 1
7267
그누보드나 배추빌더 설치시 아래와같이 오류가 납니다 6
7261
payment 플러그인 화 5
31742
그누보드5 그누보드강좌 샘플 2
7256
이클립스 이용 하시는분께 4
19776
node.js mysql 연결 방법 2가지 2
24650
상담좀 부탁드립니다~ 7
7252
저 그누보드는 설치되어 있는데 소스수정은??? 3
7248
이메일서버가 수신은 되는데 발송이 안될때 해결법이 무얼까요 3
28002
인풋폼 크로스브라우징 문제 대응법 문의요 1
19772
JavaScript 한글로 된 숫자를 아라비아 숫자로 변환 3
7245
개발자토크는 역시 제가 낄 곳이 아니군요. 2
19770
jQuery jquery.bxSlide를 이용하여 슬라이드만들기 1
19769
jQuery php에 number_format을 제이쿼리로.. 별것 다 있네요 굿이에요
30975
CSS 익스8이하에서 css3을 사용하기 3
7243
OOP에 대한 생각 1
7236
고정 아이피가 바뀌면서 서버 먹통 관련 문의 드립니다 6
28001
터치슬라이드안에 탭이 들어갈떄 질문입니다..
27994
h1 태그를 많이 써도 SEO에 영향이 없을까? 6
7233
구글 앱 등록해보신분~!! 검색 순위 궁금한게 있어요! 2
7232
부트스트랩 기반 위지웍 에디터.
19768
jQuery 제이쿼리로 이미지 회전 시키기
19765
jQuery 구형 익스에서 HTML5 적용시키기 2
19763
jQuery 특정 레이어 높이 100% 잡는 법 1
30974
CSS 레이어팝업 가로 중앙 위치 시키기
7224
Socket.IO도 결국은 리프레쉬?? 7
19761
jQuery 모바일 해상도에 맞게 이미지 출력 1
24645
2014년 9월 SIR 접속 브라우저 해상도 순위 4
19760
기타 perl을 사용하여 쉘상에서 url 주소 실행
19758
jQuery 제이쿼리를 이용하여 동영상 재생 1
19757
jQuery jquery.ulslide.js 2번째 , 마우스훨을 이용한 이미지 이동
19754
jQuery 제이쿼리 가로 슬라이드 [jquery.ulslide.js 사용법] 2
19753
jQuery 브라우저 상단에 고정 시키는 제이쿼리 소스
19752
PHP php에서 배열에 담긴 값을 중복제거 하기
19751
PHP php 에러 출력하기
7223
테스트중입니다....
7216
<? 와 <?php 의 차이가 뭔가요,, 6
7213
여러개정에서 한개의 DB 공유해서 사용 문의 2
31741
AngularJS AngularJS 강좌 9. HTML DOM
19750
jQuery 1원팁] css에 hover효과를 제이쿼리로
19749
JavaScript 1원팁]알고 있음 좋은 자바스크립트 함수
19748
jQuery 제이쿼리 기본 효과 메소드
31740
AngularJS AngularJS 강좌 8. SQL
31739
AngularJS AngularJS 강좌 7. Tables
31738
AngularJS AngularJS 강좌 6. XMLHttpRequest
7208
mariaDB -> mysql로 DB 자료 이전이 안되네요 (2편-아직도 안되요) 4
31737
AngularJS AngularJS 강좌 5. Filters
30967
기타 ie8에 font awesome 적용 방법 6
31736
AngularJS AngularJS 강좌 4. Controllers
7205
안녕하세요, 데이터베이스 관련 질문이에요.. 2
30965
HTML 팁]모바일에서 전화 걸기 1
30963
기타 파비콘 넣는 방법이에요. 1
19747
기타 익스플로러에서 구글 크롬 프레임 작동하기
19746
기타 viewport 사용
19745
기타 익스플로러9 이하 브라우저에서 CSS3 속성(radius, shadow) 사용하기
19744
기타 html5 구조를 만들기 위해 사용하는 태그
19742
기타 구형 익스플로러에서 html5 구조 사용하기 1
7193
mariaDB -> mysql로 DB 자료 이전이 안되네요 11
7191
input 태그에서 자동완성 될때 키보드로 이동은 어떤 기능인가요? 1
31735
AngularJS AngularJS 강좌 3. Directives
19741
jQuery 무한 스크롤 (이미지 갤러리용)
19740
PHP [알고리즘] 하노이의 탑
19739
PHP 범위사이에서 중복없이 랜덤(random)으로 뽑기
7188
js 파일 소스 질문이요~~~~ 2
27986
제이쿼리 플러그인 및 제이쿼리소스 7
31734
AngularJS AngularJS 강좌 2. Expressions
31733
AngularJS AngularJS 강좌 1. Introduction
31732
AngularJS AngularJS 강좌 0. Home
7186
메인 페이지에서 보이던 베너가... 1
19738
PHP [알고리즘] 이중연결리스트를 이용한 큐(queue)
19736
JavaScript [알고리즘] 스택(stack)을 이용한 간단 계산기 1
7180
카톡로그인 ㅠ.ㅠ; 5
7165
어떻게 하면 함께 할 개발자 분을 모실 수 있을까요?(고견부탁드려요) 14
이전 다음
전체 목록