인터렉티브 웹 4 - z축 원근감
2022. 3. 16. 11:45ㆍStudy/Example & Plug-in
box1 ~ box5는 실제로는 크기가 같지만, z축을 이용해 원근감을 준다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인터렉티브 웹 6</title>
<script src="https://kit.fontawesome.com/cdd59ed73b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.1.min.js" defer></script>
<script src="js/jquery.easing.1.3.js" defer></script>
<script src="js/prefixfree.min.js" defer></script>
<script src="js/custom.js" defer></script>
</head>
<body>
<!-- 배경이미지 -->
<div class="bg"></div>
<!-- 로고 -->
<h1><img src="img/logo.png" /></h1>
<!-- 주 메뉴 -->
<ul class="gnb">
<li><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- sns 모음 -->
<ul class="sns">
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
</ul>
<!-- 스크롤 네비게이션 -->
<ul class="scrollNavi">
<li class="on"><span></span><em> Player 1</em></li>
<li><span></span><em> Player 2</em></li>
<li><span></span><em> Player 3</em></li>
<li><span></span><em> Player 4</em></li>
<li><span></span><em> Player 5</em></li>
</ul>
<!-- 박스 그룹 -->
<section>
<!-- 첫 번째 박스 -->
<article class="on">
<img class="obj11" src="img/pic11.png" />
<img class="obj12" src="img/pic12.png" />
<img class="obj13" src="img/player1.png" />
<p class="on">
<span>Lorem Ipsum</span><br />
<em>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </em>
</p>
</article>
<!-- 두 번째 박스 -->
<article>
<img class="obj21" src="img/pic21.png" />
<img class="obj22" src="img/player2.png" />
<p>
<span>Lorem Ipsum</span><br />
<em>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </em>
</p>
</article>
<!-- 세 번째 박스 -->
<article>
<img class="obj31" src="img/pic31.png" />
<img class="obj32" src="img/player3.png" />
<p>
<span>Lorem Ipsum</span><br />
<em>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </em>
</p>
</article>
<!-- 네 번째 박스 -->
<article>
<img class="obj41" src="img/pic41.png" />
<img class="obj42" src="img/pic42.png" />
<img class="obj43" src="img/player4.png" />
<p class="on">
<span>Lorem Ipsum</span><br />
<em>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </em>
</p>
</article>
<!-- 다섯 번째 박스 -->
<article>
<img class="obj51" src="img/pic51.png" />
<img class="obj52" src="img/pic52.png" />
<img class="obj53" src="img/player5.png" />
<p class="on">
<span>Lorem Ipsum</span><br />
<em>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </em>
</p>
</article>
</section>
<!-- 카피라이트 -->
<span class="copyright">Copyright 2015 Seong-il, Choi All right reserved.</span>
</body>
</html>
CSS
point1 - body에 높이값 23000px을 줘서 강제로 세로 스크롤을 만든다. 이 세로값은 article의 transform:translateZ(-20000px); 값과 연동된다. 3000의 gap은 첫번째 box의 z축 값이 20000보다 커져야 하기 때문에.
point2 - article에 on 클래스를 줘 z-index를 조정해준다.
@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Orbitron);
/* Reset CSS */
* {margin:0; padding:0;}
ol,ul {list-style: none;}
a {outline:0; text-decoration:none; color:#555;}
img {border:0;}
body { width:100%; min-width:1400px; height:23000px; font-family:Orbitron; font-size:12px; letter-spacing:2px;}
/*배경 이미지*/
.bg {position:fixed; left:0px; top:0px; width:100%; height:100%; background:url(../img/bg.jpg) center top no-repeat; background-size:cover;}
/*로고*/
h1 { position:fixed; top:40px; left:70px; z-index:2;}
h1 img {width:130px;}
/*주 메뉴*/
.gnb {position:fixed; right:250px; top:50px; z-index:2;}
.gnb li {float:left; margin-left:50px;}
.gnb li a {font-size:14px; font-weight:bold; color:#fff; transform:scale(1); opacity:0.5; transition:all 0.5s;}
.gnb li a:hover {transform:scale(1.5); opacity:1;}
/*sns 모음*/
.sns {position:fixed; right:50px; top:50px; z-index:2;}
.sns li { float:left; margin-left:30px;}
.sns li .fa { font-size:18px; color:#fff; transform:scale(1); opacity:0.5; transition:all 0.5s;}
.sns li .fa:hover { transform:scale(1.5); opacity:1;}
/*스크롤 네비게이션*/
.scrollNavi {position:fixed; left:100px; top:300px; z-index:2;}
.scrollNavi li {position:relative; width:150px; height:35px; margin-bottom:20px; font-size:12px; color:#fff; text-align:center; perspective:400px; cursor:pointer;}
.scrollNavi li em { position:absolute; left:20px; top:8px; font-size:14px; font-weight:bold; color:#fff; text-shadow:1px 1px 1px #000;}
.scrollNavi li span {position:absolute; display:block; width:3%; height:100%; transform:skewX(-30deg); box-shadow:1px 1px 1px #000;}
.scrollNavi li.on span { width:100%;}
.scrollNavi li:nth-child(1) span { background:#ff0f51;}
.scrollNavi li:nth-child(2) span { background:#fffb02;}
.scrollNavi li:nth-child(3) span { background:#b57de4;}
.scrollNavi li:nth-child(4) span { background:#7cf923;}
.scrollNavi li:nth-child(5) span { background:#3dbdfa;}
/*카피라이트*/
.copyright {position:fixed; right:30px; bottom:20px; font-family:arial; font-size:11px; color:#555;}
/*박스 그룹 레이아웃*/
section {position:fixed; left:50%; top:50%; width:1200px; height:700px; margin-left:-600px; margin-top:-350px; perspective:2300px; z-index:1; }
section>article { width:1200px; height:700px; position:absolute; top:0px; left:0px; opacity:0.5; z-index:8;}
section>article.on { opacity:1; z-index:9;}
section>article:nth-child(1) { transform:translateZ(0px);}
section>article:nth-child(2) { transform:translateZ(-5000px);}
section>article:nth-child(3) { transform:translateZ(-10000px);}
section>article:nth-child(4) { transform:translateZ(-15000px);}
section>article:nth-child(5) { transform:translateZ(-20000px);}
/*박스 폰트 및 이미지 공통속성*/
section>article>p { position:absolute; width:450px; padding:30px 60px; color:#fff; opacity:1;}
section>article>p>span {font-size:60px; letter-spacing:0px; line-height:1.5;}
section>article>img { position:absolute;}
/*첫 번째 박스 콘텐츠*/
section>article:nth-child(1) p {right:-100px; bottom:100px;}
section>article:nth-child(1) p span { color:#ff0f51;}
.obj11 {left:-270px; bottom:-100px;}
.obj12 {right:-593px; top:-85px;}
.obj13 {left:-100px; bottom:20px;}
/*두 번째 박스 콘텐츠*/
section>article:nth-child(2) p {left:100px; bottom:200px;}
section>article:nth-child(2) p span { color:#fffb02;}
.obj21 {right:-710px; bottom:-420px;}
.obj22 {right:-50px; bottom:-100px;}
/*세 번째 박스 콘텐츠*/
section>article:nth-child(3) p {right:-100px;bottom:300px;}
section>article:nth-child(3) p span { color:#b57de4;}
.obj31 {right:110px; bottom:70px;}
.obj32 {left:100px; bottom:-160px;}
/*네 번째 박스 콘텐츠*/
section>article:nth-child(4) p {left:100px; bottom:290px;}
section>article:nth-child(4) p span { color:#7cf923;}
.obj41 {left:350px; bottom:-150px;}
.obj42 {right:167px; top:-255px;}
.obj43 {right:-100px; bottom:-120px;}
/*다섯 번째 박스 콘텐츠*/
section>article:nth-child(5) p {right:-150px; bottom:100px;}
section>article:nth-child(5) p span { color:#3dbdfa;}
.obj51 {left:-100px; bottom:-290px;}
.obj52 {right:30px; top:170px;}
.obj53 {left:-30px; bottom:0px;}
JS
persInt(); 정수
//페이지 로딩 시 제일 상단으로 스크롤 이동
$("body,html").stop().animate({"scrollTop":0},1500,"swing");
$(window).scroll(function(){
//변수 scroll에 현재 화면을 스크롤한 거리의 수치를 저장
var scroll = $(this).scrollTop();
for(var i=0; i<5; i++){
//스크롤값과 박스의 z축 연동
$("section>article").eq(i).css({"transform":"translateZ(" + parseInt((-5000*i)+scroll) + "px)"});
//특정 스크롤 구간에서 스크롤 네비게이션과 박스 활성화
if(scroll>=i*5000 && scroll<(i+1)*5000){
$(".scrollNavi li").removeClass();
$(".scrollNavi li").eq(i).addClass("on");
$("article").removeClass();
$("article").eq(i).addClass("on");
};
};
});
//스크롤 네비게이션 클릭 시 스크롤 이동
$(".scrollNavi li").on("click",function(){
var a = $(this).index();
$("body,html").stop().animate({"scrollTop":5000*a},1500,"swing");
});
//화면에서 마우스 무브 시 박스안의 콘텐츠 움직이기
$("body").on("mousemove",function(e){
var posX = e.pageX/100;
var posY = e.pageY/150;
$(".obj11").css({"left":-270-posX , "bottom":-100-posY });
$(".obj12").css({"right":-593+posX , "top":-85+posY });
$(".obj13").css({"left":-100+posX , "bottom":20+posY });
$(".obj21").css({"right":-710-posX , "bottom":-420-posY });
$(".obj22").css({"right":-50+posX , "bottom":-100+posY });
$(".obj31").css({"right":110-posX , "bottom":70-posY });
$(".obj32").css({"left":100-posX , "bottom":-160+posY });
$(".obj41").css({"left":350+posX , "bottom":-150-posY });
$(".obj42").css({"right":167+posX , "top":-255-posY });
$(".obj43").css({"right":-100+posX , "bottom":-120+posY });
$(".obj51").css({"left":-100-posX , "bottom":-290-posY });
$(".obj52").css({"right":30+posX , "top":170-posY });
$(".obj53").css({"left":-30+posX , "bottom":0-posY });
});
'Study > Example & Plug-in' 카테고리의 다른 글
| 인터렉티브 웹 5-2 - 스틸컷 마우스 클릭,드래그 (0) | 2022.03.17 |
|---|---|
| 인터렉티브 웹 5 - 스틸컷 마우스제어 (0) | 2022.03.17 |
| 인터렉티브 웹 3 - 영상제어 (0) | 2022.03.16 |
| 인터렉티브 웹 2 - 원페이지 슬라이드 (0) | 2022.03.15 |
| 인터렉티브 웹 1 - 3D rotate (0) | 2022.03.15 |
