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

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

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

게시글 목록

번호 제목
27980
이런 네비게이션 소스 혹시 아시는분 5
7164
영카트5 orderform.php 수정 관련 질문입니다.​
31729
부트스트랩 Bootstrap 강좌 5. Bootstrap JS Collapse 2
31726
부트스트랩 Bootstrap 강좌 4. Bootstrap Components 2
31725
부트스트랩 Bootstrap 강좌 3. Bootstrap CSS Ref.
31720
부트스트랩 Bootstrap 강좌 2. Bootstrap Case 4
31711
부트스트랩 Bootstrap 강좌 1. Bootstrap Basic 8
7159
자바스크립트 롤오버좀 도와주세여 ㅠㅠ 4
27974
고수님들 도와주세요 ㅠㅠ 5
19734
PHP [알고리즘] 단순 연결 리스트를 이용한 스택(stack) 1
19730
PHP [알고리즘] 배열로 구현하는 스택(stack) 3
19729
PHP [알고리즘] 배열 역순
27969
도서 추천 부탁드려요~~ 4
7142
php 개발시에 다들 eclipse 사용하십니까? 16
19728
jQuery remove()를 이용하여 엘리먼트 삭제하기
19725
PHP 개발하면서 도움이 많이 되는 array 함수 extract 소개합니다 2
7130
php로 개발하면서 array 를 얼마 많금활용 하세요? 11
19722
jQuery 동일 엘리먼트 순번 알아내기 2
19719
PHP [클래스] abstract 추상클래스 2
7124
페이스북 같은 사이트를 하나 만들려면... 5
19718
jQuery width(), height() 메서드를 이용하여 가로크기, 세로 크기 알아내기
19717
jQuery offset() 메서드를 이용하여 left, top 값 set, get 하기
19716
jQuery position() 메서드 객체에 대한 좌표값
19715
jQuery closest : 선택된 요소에서 최초의 부모요소 객체를 얻어온다.
7122
그누보드를 사용한 사람은 쇼핑몰 제작에는 영카트가 좋을까요? 1
30959
CSS css !important 의 활용 3
19714
PHP [클래스] 여러 종류의 객체를 하나의 배열로 다루기
31710
jQuery Mobile jQuery Mobile 강좌 19. Select Menus
31709
jQuery Mobile jQuery Mobile 강좌 18. Text Inputs
19713
PHP 배열에서 그룹별로 합계 구하기(group by)
7117
개발자님들, 슬로우쿼리 문제 좀 봐주세요!!! 4
19712
PHP [클래스] instanceof 인스턴스 확인
7111
서버이전을 하였는데 문제가 생겻읍니다 5
31708
jQuery Mobile jQuery Mobile 강좌 17. Form Basic
31707
jQuery Mobile jQuery Mobile 강좌 16. Filters
19710
PHP preg_split 를 이용한 문자열 나누기와 중복값 제거후 정렬 1
31706
jQuery Mobile jQuery Mobile 강좌 15. List Content
31705
jQuery Mobile jQuery Mobile 강좌 14. List Views
31704
jQuery Mobile jQuery Mobile 강좌 13. Layout Grids
19709
PHP 중복된 값 중 한개만 제거 2번째 이야기
19707
PHP 중복된 값 중 제일 처음에 있는 값만 제거하기 1
31703
jQuery Mobile jQuery Mobile 강좌 12. Tables
19706
jQuery class가 있는지 없는지 체크하기
31702
jQuery Mobile jQuery Mobile 강좌 11. Collapsibles
19705
PHP 배열에서 중복 값 없애기
31701
jQuery Mobile jQuery Mobile 강좌 10. Panels
19704
PHP [클래스] Singleton 싱글톤
31700
jQuery Mobile jQuery Mobile 강좌 9. Navigation Bars
31699
jQuery Mobile jQuery Mobile 강좌 8. Toolbars
31698
jQuery Mobile jQuery Mobile 강좌 7. Popups
7107
모바일 웹 연동 웹앱에서 본인인증 후 경로 질문입니다.. 3
19703
JavaScript str_pad 자릿수만큼 특정문자로 채우기
31697
jQuery Mobile jQuery Mobile 강좌 6. Icons
31696
jQuery Mobile jQuery Mobile 강좌 5. Buttons
19702
PHP [클래스] Overloading 오버로딩2
19701
PHP [클래스] Overloading 오버로딩1
31695
jQuery Mobile jQuery Mobile 강좌 4. Transitions
27965
포커싱에 맞게 오브젝트가 보여지는 방법 문의요! 3
31694
jQuery Mobile jQuery Mobile 강좌 3. Pages
19700
PHP 날짜 문자 1분 전, 1시간 전, 1일 전 표시
31693
jQuery Mobile jQuery Mobile 강좌 2. Install
19699
PHP [클래스] 포함관계를 통한 다중상속(?)
31692
jQuery Mobile jQuery Mobile 강좌 1. Introduction
31691
jQuery Mobile jQuery Mobile 강좌 0.home
19698
PHP [클래스] __construct 조상클래스의 생성자
19697
PHP [클래스] Overriding 오버라이딩
19696
jQuery 마우스 오버 위치에 따라 툴팁 생성 및 자동 이동
19694
jQuery animate 사용법 및 animate가 중복 될 경우 처리 하는 방법 1
19693
jQuery 제이쿼리 동적으로 생성된 객체에 이벤트 생성하기
19692
jQuery 제이쿼리 bind, unbind 이벤트 생성, 해제하기
19691
PHP php, 강제로 에러 출력하게 하기
19690
JavaScript shuffle 배열섞기
19689
jQuery 제이쿼리 모음 사이트
19688
PHP 1원팁] IP 대역 비교
19687
PHP [클래스] Interface 인터페이스
7105
네이버/다음 캘린더 외부 삽입은 막혀있나요? 1
30955
CSS sprite 이미지를 css코드로 변환해주는 웹도구 3
7100
전혀 다른 시스템의 DB이전 어떻게 처리 하시나요? 4
19681
PHP input 쉽게 관리하기 5
7097
작업은 어느정도 되가나요? 에 어떻게 대답을 해야될까요? 2
19678
JavaScript 서버시간을 사용한 전자시계 2
7089
Sphinx search 적용 후기 7
7086
서브도메인 설정 도움이필요합니다 ㅜㅜ 2
7084
여쭤봅니다. 어디서 검색해오는지 1
7082
제발 도와주세요 1
19677
PHP [함수] 1원 팁 - fwrite() 함수 관련
30953
기타 영역 스크롤 질문드립니다. 1
7080
html언어에서요,폰트를 일정 사이클로 바꿔주고 싶은데 어떻게해야하나요? 1
7077
홈페이지 주소 설정 문의입니다.. 2
7071
테이블 태그 관련 문의 5
7070
chart 관련 javascript framework
7066
귀차니즘은 개발자를 발전하게 만든다. 3
19676
JavaScript 구글 웹사이트 번역기를 내 사이트에 달기
19674
웹서버 htaccess를 이용하여 짧은주소 및 url 주소 리다이렉션하기 1
27961
움직이는 퀵메뉴 하단에 닿기 전에 멈추는 방법이 있을까요? 3
7063
SSL 적용하면 속도가 혹시 & 질문2개 2
7061
PHP 의 5.6 메인 브랜치의 정식 버전이 출시 1
19669
jQuery input value 값 1씩 한꺼번에 증가시키기 4
7060
안드로이드 UI 노과다
20842
도로명주소 juso.sir.co.kr 도로명 주소 검색 시스템 구축 가이드 - 전체파일 7
이전 다음
전체 목록