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

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

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

게시글 목록

번호 제목
20215
jQuery opener에 있는 각종 element의 정보가져오기
20214
JavaScript 특정 이메일 입력 금지및 이메일 유효성 검사하기 입니다.
20213
JavaScript 마우스 오버시 그림 변하게 하는 자바스크립트 입니다
20212
JavaScript 시작과 멈춤이 가능한 스크롤 텍스트 입니다.
28362
체크박스 영역을 크게 잡을수 없나요? 3
20211
JavaScript 이미지 없이 라운딩 박스 + 보더 표현하기 입니다.
20210
JavaScript Trim 함수 자바스크립트로 사용하기 입니다.
20209
JavaScript 실제 이미지 크기 알아내기 입니다.
20208
JavaScript present 자바스크립트 입니다.
20207
JavaScript 이미지 미리 로딩시켜놓기 입니다.
20206
JavaScript 다각형 이미지슬라이드쇼 자바스크립트 입니다.
20205
JavaScript 가운데 정렬된 홈페이지에서 따라다니는 레이어 자바스크립트 입니다.
20204
JavaScript 클릭시 펼쳐지는 메뉴 입니다.
20203
JavaScript 테이블 각 row 마우스오버시 색깔바꾸기 입니다.
20202
JavaScript png 24비트 투명처리하기 입니다.
20201
JavaScript full-down메뉴 자바스크립트 입니다.
20200
JavaScript iframe사용시 높이 자동 조정하기 입니다.
20199
JavaScript 계산기
20198
JavaScript 숫자를 한글로 변환하기 입니다.
20197
JavaScript 아이프레임 자동으로 늘어나는 자바 스크립트 입니다.
20196
JavaScript 끊기지 않는 배너 롤링 입니다.
20195
기타 랜섬에 당한 화일 복구
20194
JavaScript id값 변수명으로 치환 예제 자바스크립트 입니다.
20193
JavaScript 상태바의 링크 주소 감추기 입니다.
20192
JavaScript 가짜 카운터 달기 입니다.
20191
JavaScript 홈에 머문시간을 제목표시줄과 상태바에 실시간으로 알려주기 입니다.
20190
JavaScript prompt 와 alert 응용 자바스크립트 예제 입니다.
20189
JavaScript prompt 와 alert 간단한 자바스크립트 예제 입니다.
20188
jQuery 간단한 탭 제이쿼리
28361
부트스트랩하면서..
20187
jQuery 간단한 셀렉트 드롭다운 제이쿼리
20186
JavaScript 문서내 이미지갯수 출력하기 입니다.
20185
JavaScript 내용 복사해서 붙어넣기 하면 출처 따라오는 자바스크립트입니다.
20184
JavaScript 팝업창 지정한 시간대에 예약 열기 입니다.
20183
JavaScript 접속때마다 음악 다르게 나오기 입니다.
20182
JavaScript 자동 스크롤 메뉴 관련 입니다.
20181
JavaScript 이 브라우저로 몇페이지나 보았나 확인하기 입니다.
20180
JavaScript 사용자 브라우저의 펄러그인 목록 출력하기 입니다.
20179
JavaScript 상태표시줄 제어 + 간단한 복사 제어 하기 입니다.
20177
JavaScript 팝업창을 브라우저 해상도 구분없이 항상 중앙에 띄우기 입니다. 1
8183
클라우딩 펀딩싸이트 구축할려면 얼마나 들까요? 13
31027
기타 유튜브 재생 중인 팝업 레이어 숨길 때 재생 멈추는 방법
8181
toad for mysql 사용하는데 insert시 한글이 깨져나옵니다.ㅠ 1
20176
jQuery 간단한 셀렉트 드롭다운 제이쿼리
20175
JavaScript 우클릭해제 소스 보기 자바스크립트 입니다.
20174
JavaScript 미리보기 소스 입니다.
20173
JavaScript 움직임이 자연스러운 자바시계 입니다.
20172
JavaScript 특정사람에게 메일 보내기 입니다.
20171
JavaScript DirectX의 와이프 기능을 사용한 이미지 스와핑 효과 내기 입니다.
20170
JavaScript iframe 써서 노 프레임 효과 내기 입니다.
20169
jQuery 이미지 없이 구현하는 간단한 별점 기능 제이쿼리
20168
PHP PHP 4.x버전에서 hash_hmac 함수 사용하기
20156
node.js Node.js - 실시간 위치 추적 (1) 11
20154
PHP wget으로 외부 컨텐츠 가져오기 입니다. 1
20153
PHP php로 이미지 흑백효과 주기 입니다.
20152
PHP Sendmail 로그분석 스팸 탐지 정리입니다.
8177
중복된 내용를 추출 하는방법 3
20151
PHP 이미지주소 인코딩으로 페이지로딩시간 절약하기 입니다.
20149
PHP 유용한 함수 file_exists 입니다. 1
20148
PHP 마우스 오른쪽 매뉴활성화 막는 간단한 방법입니다
20147
PHP 파일 하나로 끝내는 DB 관리 'Adminer' 입니다.
20146
PHP 프로그램 실행 메모리 체크 memtrack 입니다.
20145
PHP 유용한 함수 call_user_func 입니다.
20144
PHP PHP ANOTATION , Reflection 입니다.
20143
PHP 유용한 함수 array_filter 입니다.
20142
PHP 유용한 함수 substr 과 array_slice 입니다.
20141
PHP php 함수검색기 입니다.
20140
PHP php로 동영상파일 영상정보 가져오기 입니다.
20139
PHP fwrite() 함수 관련 입니다.
20137
PHP php 로 ssh2 원격접속 명령실행하기 입니다. 1
20135
PHP 모바일로 접속하는지 웹으로 접속하는지 체크하기 입니다. 1
20134
PHP 모바일 OS에서 자바스크립트 select() 구현하기 입니다.
20133
Mobile 모바일웹에서 현재위치의 좌표 가져오기
20129
JavaScript alert 창 디자인하기 3
20128
JavaScript 자동완성 자바스크립트
20126
PHP 주소로 구글 좌표 구하기 1
8172
비회원일때 글쓰기버튼 보이고 로그인후 이용할수있습니다 문구!! 4
20123
PHP php에서 ssh2로 서버간 파일 복사하기 입니다. 2
20122
PHP euc-kr페이지에서 AJAX연동시 한글 깨짐 현상 해결법 입니다.
20121
PHP js와 php를 배열로 연결하기 입니다.
20117
PHP vi 정리 입니다. 3
20116
PHP 디비에서 특정문자를 변경 하는 방법 입니다.
20115
PHP 다른 url 의 읽어서 값만 변수에 저장
20114
PHP 검색사이트 긁어오기 입니다.
20113
PHP bresenham 알고리즘을 이용한 직선, 원, 타원 그리기 입니다.
20112
PHP 숫자 입력 유효성 체크 하기 입니다.
20111
PHP get 변수에서 원하는 값만 바꾸기 입니다.
20110
PHP php 기본 실행 시간이 초과 됐을때 에러 해결법 입니다.
20109
PHP $PHP_SELF 가 안될때 해결법 입니다.
20108
PHP phpMyAdmin 하나로 서버내 전체사용자가 사용하기 입니다.
20107
PHP 썸네일 생성시 Sharpen 적용하기 입니다.
20106
PHP PHP에서 싱글톤 패턴 구현하기 입니다.
20104
PHP Apache DOS 공격 방어 - mod_evasive - web 입니다. 1
20103
PHP apache의 httpd.conf 설정 방법입니다.
20102
PHP 세션만을 이용한 현재 접속자. 로케이션 표시 입니다.
20101
MySQL MYSQL에 대용량 SQL파일 import하기
31024
반응형 반응형 코딩할때 height:100% 에 관해서... 2
20100
JavaScript Fiddler - 데이타 송수신 상태 체크 프로그램
20099
PHP 웹서버(아파치)를 이용한 인증 입니다.
20098
PHP php로 엑셀 만들기 입니다.
이전 다음
전체 목록