인터렉티브 웹 5-2 - 스틸컷 마우스 클릭,드래그
2022. 3. 17. 11:41ㆍStudy/Example & Plug-in
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>인터레티브 웹 4-1</title>
<!-- <link rel="stylesheet" href="css/jpreloader.css" /> -->
<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>
<!-- <script src="js/jpreloader.js"></script> -->
</head>
<body>
<h3>0</h3>
<!-- 배경이미지 -->
<div class="bg"></div>
<!-- header -->
<header>
<h1><a href="#"><img src="img/logo.png" alt="sarar" /></a></h1>
<ul>
<li><a href="#"><i class="fa fa-facebook-square"></i></a><li>
<li><a href="#"><i class="fa fa-twitter-square"></i></a><li>
<li><a href="#"><i class="fa fa-vimeo-square"></i></a><li>
</ul>
</header>
<nav>
<ul>
<!-- menu -->
<li>
<a href="#">COLLECTION</a>
<div>
<h2>COLLECTION</h2>
<p><img src="img/thumb1.jpg" /></p>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<!-- menu -->
<li>
<a href="#">STORE LOCATION</a>
<div>
<h2>STORE LOCATION</h2>
<p><img src="img/thumb2.jpg" /></p>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<!-- menu -->
<li>
<a href="#">ADVERTISEMENT</a>
<div>
<h2>ADVERTISEMENT</h2>
<p><img src="img/thumb3.jpg" /></p>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<!-- menu -->
<li>
<a href="#">ONLINE STORE</a>
<div>
<h2>ONLINE STORE</h2>
<p><img src="img/thumb4.jpg" /></p>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<!-- menu -->
<li>
<a href="#">CONTACT</a>
<div>
<h2>CONTACT</h2>
<p><img src="img/thumb5.jpg" /></p>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
<!-- menu -->
<li>
<a href="#">CORPORATE</a>
<div>
<h2>CORPORATE</h2>
<p><img src="img/thumb6.jpg" /></p>
<ul>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
<li><a href="#">menu item</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<!-- 이미지 시퀀스 프레임 -->
<section>
<img src="img/pic0.jpg" />
</section>
<!-- footer -->
<footer>
<ul>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">News letter</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Credits</a></li>
<li><a href="#">Privacy Notice</a></li>
</ul>
<span>
Copyright ⓒ 2015 SARAR INT ALL Rights Reserved.
</span>
</footer>
</body>
</html>
CSS
@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; color:#fff;}
a { outline:0; text-decoration:none; color:#bbb;}
img { border:0;}
h3 { font-size:100px; position:fixed; top:0px; left:0px; z-index:10; color: #fff }
/*배경이미지*/
.bg { width:100%; height:100%; background: url(../img/bgLine.png) repeat 0px 0px; opacity:0.1; position:fixed; top:0px; left:0px; z-index:1;}
/* header 로고 */
header h1 { width:400px; position:absolute; top:100px; left:50%; margin-left:-200px;}
header h1 img { width:100%; height:auto;}
/* header sns */
header ul { position:absolute; top:60px; right:30px; z-index:2; }
header ul li { float:left; margin-right:10px; opacity:0.5; transition:all 0.4s;}
header ul li:hover { opacity:1; transform:scale(1.2);}
header ul .fa { font-size:25px; color:#fff;}
/* nav */
nav { width:100%; height:50px; position:fixed; z-index:3; top:50%; margin-top:-25px; left:0px; background:url(../img/tr.png) repeat 0 0; }
/* nav 1depth */
nav>ul { width:1200px; height:50px; margin:0 auto; }
nav>ul>li { width:200px; height:50px; float:left; text-align:center; box-sizing:border-box; position:relative; perspective:700px;}
nav>ul>li>a { display:block; width:200px; height:50px; font: 12px/4 orbitron; color:#aaa; transition:all 0.4s;}
nav>ul>li:hover>a { transform:translateY(-20px); opacity:0;}
/* nav 2depth 패널 */
nav>ul>li>div { position:absolute; left:0px; top:-50px; width:200px; height:300px; background:url(../img/tr.png) repeat 0 0; border:1px solid #000; box-sizing:border-box; opacity:0; transition:all 0.5s; padding:10px;}
nav>ul>li:hover div { opacity:1; top:-100px; transform:rotateY(360deg);}
/* nav 2depth 썸네일 */
nav>ul>li>div>p { width:100%; height:90px; border:1px solid #333; box-sizing:border-box; overflow:hidden;}
nav>ul>li>div>p>img { width:100%; opacity:0.5;}
/* nav 2depth 제목 */
nav>ul>li>div>h2 { position:absolute; left:0px; top:100px; width:100%; height:50px; text-align:center; font:bold 12px/3.5 orbitron; color:#fff;}
/* nav 2depth 메뉴 */
nav>ul>li>div>ul { width:100%; position:absolute; bottom:0px; left:0px; }
nav>ul>li>div>ul>li>a { display:block; width:100%; height:37px; border-top:1px solid #111; color:#ddd; text-align:center; font:11px/2.8 orbitron; color:#888; transition:all 0.4s; }
nav>ul>li>div>ul>li>a:hover { background:#000; color:#fff;}
/*section*/
section { position:fixed; z-index:2; width:100%; height:500px; top:50%; margin-top:-250px; left:0px; overflow:hidden; opacity:1; }
section>img { width:100%; height:auto; position:absolute; top:-150px; left:0px; }
/*footer*/
footer { position:fixed; bottom:0px; left:0px; width:100%; height:30px; background:#010101; border-top:1px solid #222; z-index:5; }
footer ul { width:40%; height:30px; float:left; margin-left:30px; margin-top:3px;}
footer ul li { float:left; width:16.66%; text-align:center;}
footer ul li a { font:11px/2 arial; color:#555;}
footer ul li:nth-child(1) a { font-weight:bold; color:#777;}
footer ul li:nth-child(2) a { font-weight:bold; color:#777;}
footer span {font:10px/2 orbitron; color:#666; float:right; letter-spacing:1px; margin-right:40px; margin-top:4px;}
JS
중첩 이벤트를 사용한다.
mousedown - 마우스를 꾹 누르고 있는 상태에서
mousemove - 마우스를 움직임.
마우스를 꾹 누르고 있는 상태에서 마우스를 움직일 때
이벤트 제거
// 마우스 무브시 안쪽의 구문 실행
$("section").on("mousedown",function(e){
e.preventDefault();
$(this).on("mousemove",function(e){
// 변수 wid에 현재 브라우저의 넓이값 저장
var wid = $(window).width(); //1000
// 변수 posX에 화면상에 마우스 커서의 위치 저장
var posX = e.pageX; //100
// 변수 percent에 200까지의 백분율 수치 저장
var percent = Math.floor((posX/wid)*201); //0~200
// (마우스x좌표/윈도우너비)*200(이미지개수)
// 해당 백분율 값을 h3에 출력
$("h3").text(percent);
// 모든 img 태그를 숨김 처리
$('section img').attr('src','img/pic'+percent+'.jpg');
});
});
$("section").on("mouseup",function(e){
e.preventDefault();
$("section").off("mousemove"); //이벤트제
});
interective4-1 (2).zip
15.49MB
'Study > Example & Plug-in' 카테고리의 다른 글
| 인터렉티브 웹 6 - 시간에 따라 배경이 달라지는 시계 (0) | 2022.03.17 |
|---|---|
| 인터렉티브 웹 5-2 - 3D 회전 플러그인 (0) | 2022.03.17 |
| 인터렉티브 웹 5 - 스틸컷 마우스제어 (0) | 2022.03.17 |
| 인터렉티브 웹 4 - z축 원근감 (0) | 2022.03.16 |
| 인터렉티브 웹 3 - 영상제어 (0) | 2022.03.16 |
