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

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

Nextstep
프로필 보기이 회원 글보기
 · 18년 전 · 5201 · 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년 전
멋집니다.

게시글 목록

번호 제목
11797
Flash 플래시 1 픽셀 정도 어긋나는 현상때문에요....... 6
11796
기타 Progress 로딩바
29161
HTML 체크박스 전체선택 소스
11795
기타 텍스트 박스의 내용을 쿠키로 저장하는 스크립트 입니다.
11794
PHP [펌]PHP 애플리케이션을 가장 빠르게, Part 2: PHP 애플리케이션을 프로파일링 하여 느려진 코드를 진단 및 빠르게 하기 (한글)
11793
PHP [펌]PHP 애플리케이션을 가장 빠르게, Part 1: opcode 캐시 소프트웨어로 성능과 처리량 높이기
11789
MySQL Oracle 과연 대용량에만 사용가능할까? 3
11784
기타 Drag & Drop Sample 4
29160
HTML window.print() div 를 이용한 부분인쇄
11781
Flash 도와주세요.. 2
11778
PHP SSL 관련 링크 2
24966
휴가원_기업일반 1
24964
회의록_인사 1
24963
제안서 회사약식제안서_기타
24961
회계전표_회계 1
24960
확인서_경리
24950
제안서 홈페이지개발제안서_개발 9
24948
현금지출장_경리 1
24947
현금보관증_부동산
24946
프랜차이즈-체인점계약
24945
품의서_인사
24944
계약서 표준임대차계약서_부동산
24943
팩스전송용지_경리
24942
팩스기안문_인사
24941
투자관련협의서_영업
24940
퇴직증명서_인사
24939
퇴직서_총무
29158
HTML 셀렉트박스(체크, 라디오)를 PHP(ASP, JSP)에서 선택하는 방법 1
11777
MySQL Logrotate
11774
JavaScript startssl 자동실행 2
11772
기타 4. 아파치 서버 설정하기 (보안, SSL) 1
11771
기타 Apache SSL 보안 설치
11770
MySQL mysql error code
11769
MySQL Mysql - ErrCode
11765
기타 [질문]그물효과패턴이라는데, 사용법은? 3
11764
기타 날짜 맞추기
11763
기타 httpd: Could not determine the server's fully qualified domain name, using 127.0.0.1 for Server Name
11758
기타 웹 브라우저에서 가로 스크롤 안생기게 하기 4
29148
HTML 괜찮은 레이어 팝업창 소스 9
11752
기타 삽질하다 막혀버렸어요... ㅠㅠ 5
11747
기타 지우개 툴로 손글씨 쓰기-CS3 새로생긴 기능 4
11746
기타 페도라 리눅스 네임서버 설치
29147
HTML CS3의 새로운 기능 - Live Color 사용법
11744
JavaScript 플래쉬 초보입니다...질문좀 ^^ 1
11735
Flash 퀵메뉴 - 수정해서 쓰세요!^^ 8
29145
HTML 각각의 툴에대한 옵션바의 수치를 기본설정으로 돌릴려면 1
11733
기타 히든필드 처리하기 1
11731
JavaScript 경고창의 폰트 조절..... 1
11730
기타 [질문] action레이어 하나에서 버튼 클릭시 사진을 이동하게 할려고 하는데,,,
24937
기본이력서 1
11728
기타 마지막으로 사용된 필터 한번 더 적용할때 단축키로 간단히 1
11727
기타 JS 이용해서 동적으로 테이블 생성
11725
기타 이동툴로 잠시 변환후, 원래의 툴을 사용하려할때 1
11717
기타 포샵에서 한글이 안써지고 영어만 써질때가 간혹 있어여 7
29138
HTML 원하는 물체만 쉽게 선택하는 툴은 없나요? 6
11716
기타 열린 인터넷 소켓 리스트 출력하기
11715
JavaScript 특정 프로세스가 연 파일 보기.
11714
기타 특정 사용자 &#51922;아 낼때 사용하는 명령어
11711
기타 CS3 간단 리뷰 2
11710
Flash 플래시 파일명 대신 외부파일 호출
11708
Flash 플래시 파일명 대신 외부파일 호출 1
11700
MySQL mysql 원격접속방법 7
11697
기타 대화 상자 닫지말고 Reset하자 2
24936
취업추천의뢰서_인사
24935
출장보고서_영업
24934
출근부_노무관리
24933
추천서_인사
24932
총무_월말종합보고서
24931
창업사업계획(승인,변경승인)신청서
24930
차용증_기업일반
24929
지출결의서_경리
24928
주주명부_기업일반
24927
주식회사정관예제_창업
24926
계약서 주식양수도계약서_경리
24925
주문서_기업일반
24922
제안서 제안서_기업일반 2
24921
계약서 전세계약서_일반계약
24920
계약서 전세계약서_부동산
24919
재직증명서-현정관리
24918
재직증명서_기업일반
24917
재직증명서2_노무
24916
재직증명서2_기업일반
24915
계약서 장비임대 계약서_영업
24914
잔여퇴직급여-수당청구서_행정자치부
24913
계약서 자동차매매계약서-양도양수_일반계약
11696
기타 메뉴를 찾습니다
11694
기타 히스토리 팔레트 그것이 알고 싶다!!! 1
24912
자기소개서_인사
24911
인사고과표_기업일반
24910
이력서_기업일반
24909
위임장_기업일반
24908
영업보고서_인사
24907
영업_업무출장보고서
24906
영수증_기타
11692
PHP waterproof phpedit 무료 라이센스 얻는 법 1
24905
영문재직증명서_회사
24904
영문이력서_개인
24903
영문이력서2_개인
24902
계약서 연봉제근로계약서
24901
계약서 연봉계약서-근로_기타
이전 다음
전체 목록