인터렉티브 웹 1 - 3D rotate

2022. 3. 15. 10:39ㆍStudy/Example & Plug-in

예제 완성 화면

 

 

HTML

point 1 - script src에 defer를 사용하면 브라우저가 페이지의 파싱을 모두 끝내면 스크립트가 실행된다.

<!DOCTYPE html>
<html lang="ko">
<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>인터렉티브 웹 1</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/prefixfree.min.js" defer></script>
	<script src="./js/custom.js" defer></script>
</head>
<body>
	<div class="wrap">

		<!-- nav 영역을 호출할 버튼  -->
		<a class="btnMenu" href="#"><i class="fa-solid fa-bars"></i></a>

		<!-- 실제 카테고리 메뉴가 들어갈 nav 영역 -->
		<nav>
			<h1><img src="img/logo.png" /></h1>
			<ul id="gnb">
				<li><a href="#">Homme</a></li>
				<li><a href="#">Girl</a></li>
				<li><a href="#">Kids</a></li>
			</ul>
		</nav>

		<!-- 3개의 컨텐츠 박스가 들어갈 section 영역 -->
		<section>
			
			<!-- 첫 번째 박스 -->
			<div class="box1 on">
				<p><strong>Vogue Homme</strong></p>
				<p></p>
				<p>	
					<em><a href="#"><i class="fa fa-twitter"></i></a></em>
					<em><a href="#"><i class="fa fa-facebook"></i></a></em>
					<em><a href="#"><i class="fa fa-envelope"></i></a></em>
				</p>
				<p></p>
				<p></p>
				<p><span>Travis Crown</span></p>
				<p>
					<!-- <video loop autoplay preload> -->
					<video loop preload>
						<source src="img/vid.mp4" type="video/mp4">
					</video>
				</p>
				<p></p>
				<p><span>Best Qualified  Goods</span></p>
				<p></p>
				<p><span>Sports</span></p>
			</div>
			
			<!-- 두 번째 박스 -->
			<div class="box2">
				<p><span>tremendous</span></p>
				<p></p>
				<p><strong>Vogue Girl</strong></p>
				<p></p>
				<p></p>
				<p></p>
				<p><span>Accessories</span></p>
				<p></p>
				<p><span>Jewelry</span></p>
				<p></p>
				<p></p>
			</div>
			
			<!-- 세 번째 박스 -->
			<div class="box3">
				<p></p>
				<p><span>Play & Dolls</span></p>
				<p></p>
				<p><strong>Vogue Kids</strong></p>
				<p></p>
				<p><span>Clothes</span></p>
				<p></p>
				<p></p>
				<p></p>
				<p></p>	
			</div>
			
		</section>
		
	</div>
</body>
</html>

 

 

CSS

point 1 - 풀스크린 모드에서는 body와 wrap에 아래와 같이 스타일을 주는게 포인트다.

body{width:100%; height:100%;}
.wrap{position:fixed; width:100%; height:100%;}

point 2 - height 값을 %로 줄 때는 상위계층(부모, 최소 body부터)에 모두 세로 % 값이 있어야 한다.

point 3 - 3d rotate를 위해서는 부모에 perspective 값이 있어야 한다.

.wrap {perspective:900px;}
nav{position:fixed; transform:rotateY(120deg); transform-origin:left center;}

 

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Orbitron);

/* Reset CSS */
* { margin:0; padding:0;}
ol,ul { list-style: none; }
body {position:fixed; width:100%; height:100%; background:#111; font-family:orbitron;}
a {text-decoration:none; color:#bbb; outline:0;}
img {border:0;}


.wrap {position:fixed; width:100%; height:100%; min-width:1024px; min-height:768px; perspective:900px;}

/* 메뉴 호출 버튼 */
.btnMenu { position:fixed; left:40px; top:50px; width:20px; height:70px; text-align:center; font-size:40px; color:#fff; z-index:3; animation:ani 0.5s infinite alternate;}

@keyframes ani {
    0% { transform:scale(1); opacity:1; color:#fff;}
    100% { transform:scale(1.5); opacity:0.8; color:#888;}
}


/* 카테고리 그룹 */
nav {position:fixed; width:150px; height:100%; background:#eee; z-index:2; transform:rotateY(120deg); transform-origin:left center; opacity:0; z-index:2;	transition:all 0.8s;}
nav.on {transform:rotateY(15deg); opacity:1;}

/* 로고 */
nav h1 {position:absolute; left:50%; top:80px; width:100px; margin-left:-50px;}
nav h1 img {width:100%; height:auto;}

/* 카테고리 메뉴 */
nav ul {position:absolute; left:0px; top:35%; width:100%;}
nav li a {display:block; width:100%; box-sizing:border-box; font-size:18px; line-height:4; color:#000; text-align:center; transition:all 0.5s;}
nav li a:hover {color:#fff; background:#000;}

/* 컨텐츠 그룹*/
section { position:fixed; width:100%; height:100%; background:#555; z-index:1;	transform-origin:right center; transition: all 0.5s; }
section.on { transform:rotateY(-10deg);}
section > div { position:absolute; width:100%; height:100%; z-index:1; opacity:0; perspective:700px;	transition:all 1.5s; }
section > div.on { z-index:2; opacity:1;}
section > div > p {box-sizing:border-box; text-align:center; overflow:hidden; transform:rotateY(180deg); transition:all 1.5s;}
section > div.on > p {transform:rotateY(0deg);}

/* 컨텐츠 폰트 설정 */
section > div > p > span {position:absolute; top:50%; display:block; width:100%; text-align:center; margin-top:-10px; font-size: 20px; color:#eee;}
section > div > p > strong {position:absolute; top:50%; display:block; width:100%; text-align:center; font-size: 50px; color:#fff; margin-top:-25px;}

/* 컨텐츠 동영상  설정 */
section > div > p > video {width:100%;}

/* 컨텐츠 웹 아이콘 설정 */
section > div > p > em > a > i {position:relative; top:50%; font-size:30px!important; color:#eee; margin:-15px 15px 0 15px; opacity:0.5; transition:all 0.5s;}
section > div > p > em > a > i:hover {transform:scale(1.2); opacity:1;}


/* box1 */
.box1 > p{position:relative; float:left; height:25%; text-align:center;}
.box1 > p:nth-child(1) {width:50%; background-color:#333;}
.box1 > p:nth-child(2) {width:25%; background:url(../img/m1.jpg) right center no-repeat #ccc; background-size:cover;}
.box1 > p:nth-child(3) {width:25%; background:#444;	}
.box1 > p:nth-child(3) ul {position:absolute; top:50%;}
.box1 > p:nth-child(4) {width:50%; height:50%;background:url(../img/m2.jpg) center top no-repeat; background-size:cover; float:right;}
.box1 > p:nth-child(5) {float:right; width:25%; background:url(../img/m3.jpg) left center no-repeat #fff; background-size:contain;}
.box1 > p:nth-child(6) {float:right; width:25%; background:#888;}
.box1 > p:nth-child(7) {float:right; width:25%; background:#444;}
.box1 > p:nth-child(8) {float:right; width:25%; background:url(../img/m4.jpg) center center no-repeat; background-size:cover;}
.box1 > p:nth-child(9) {width:25%; background:#444;}
.box1 > p:nth-child(10) {width:50%; background:url(../img/m5.jpg) right center no-repeat; background-size:cover;}
.box1 > p:nth-child(11) {width:25%; background:#222;}

/* box2 */
.box2 > p {float:left; text-align:center; height:25%;}
.box2 > p:nth-child(1) {width:25%; background:#444;}
.box2 > p:nth-child(2) {width:25%; background:url(../img/w1.jpg) center bottom no-repeat #fff; background-size:contain;}
.box2 > p:nth-child(3) {width:50%; background:#222;}
.box2 > p:nth-child(4) {width:25%; height:49.9%; background:url(../img/w2.jpg) right top no-repeat #fff; background-size:cover;}
.box2 > p:nth-child(5) {width:50%; height:49.9%; background:url(../img/w3.jpg) center center no-repeat #fff; background-size:cover;}
.box2 > p:nth-child(6) {width:25%; background:url(../img/w4.jpg) center center no-repeat #fff; background-size:contain;}
.box2 > p:nth-child(7) {width:25%; background:#555;}
.box2 > p:nth-child(8) {width:25%; background:url(../img/w5.jpg) center center no-repeat #fff; background-size:cover;}
.box2 > p:nth-child(9) {width:25%; background:#555;}
.box2 > p:nth-child(10) {width:25%;	background:url(../img/w6.jpg) center top no-repeat; background-size:cover;}
.box2 > p:nth-child(11) {width:25%;	background:url(../img/w7.jpg) center center no-repeat #fff; background-size:cover;}

/* box3 */
.box3 > p {float:left; width:25%; height:25%;}
.box3 > p:nth-child(1) {width:50%; height:100%; background:url(../img/k1.jpg) center top no-repeat #fff; background-size:cover;}
.box3 > p:nth-child(2) {background:#555;}
.box3 > p:nth-child(3) {background:url(../img/k2.jpg) center center no-repeat; background-size:cover;}
.box3 > p:nth-child(4) {width:50%; background:#222;}
.box3 > p:nth-child(5) {height:50%; background:url(../img/k3.jpg) center top no-repeat; background-size:cover;}
.box3 > p:nth-child(6) {background:#777;}
.box3 > p:nth-child(7) {background:url(../img/k4.jpg) center center no-repeat; background-size:cover;}

 

 

JS

// .btnMenu 버튼 클릭시 실행 될 모션
$(".btnMenu").on("click",function(){
    $(this).fadeOut();
    $("section").addClass("on");
    $("nav").addClass("on");
});

// nav 영역안의 메뉴 선택시 실행 될 모션
$("nav li").on("click",function(){
    $(".btnMenu").fadeIn();
    $("section").removeClass("on");
    $("nav").removeClass("on");
});

// nav 영역안의 메뉴 선택시 실행 될 모션
$("nav li").on("click",function(){
    $(".btnMenu").fadeIn();
    $("section").removeClass("on");
    $("nav").removeClass("on");

    var i = $(this).index();                // 0 1 2
    $("section>div").removeClass("on");     // 모두 off
    $("section>div").eq(i).addClass("on");  // 자신 on
});

 

 

interactive1.zip
8.47MB

 

 

 

'Study > Example & Plug-in' 카테고리의 다른 글

인터렉티브 웹 3 - 영상제어  (0) 2022.03.16
인터렉티브 웹 2 - 원페이지 슬라이드  (0) 2022.03.15
반응형 네비게이션 2  (0) 2022.01.11
반응형 네비게이션 1  (0) 2022.01.11
Plug-in Nwagon  (0) 2021.12.20

관련글

댓글 0

티스토리툴바