인터렉티브 웹 5 - 스틸컷 마우스제어
2022. 3. 17. 10:31ㆍStudy/Example & Plug-in
HTML
로딩바 플러그인
<link rel="stylesheet" href="css/jpreloader.css">
<script src="js/jpreloader.js" defer></script>
<!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</title>
<script src="https://kit.fontawesome.com/cdd59ed73b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<!-- <link rel="stylesheet" href="css/jpreloader.css"> -->
<script src="js/jquery-2.1.1.min.js" defer></script>
<script src="js/prefixfree.min.js" defer></script>
<!-- <script src="js/jpreloader.js" defer></script> -->
<script src="js/custom.js" defer></script>
</head>
<body>
<!-- 배경이미지 -->
<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" alt="image">
</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>
<!-- 로딩바가 들어 갈 프레임 -->
<div id="jSplash"></div>
<h3>0</h3>
</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;}
/*배경이미지*/
.bg {position:fixed; left:0; top:0; width:100%; height:100%; background: url(../img/bgLine.png) 0 0 repeat; opacity:0.1; z-index:1;}
/* header 로고 */
header h1 {position:absolute; left:50%; top:100px; width:400px; 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 {position:fixed; left:0px; top:50%; width:100%; height:50px; margin-top:-25px; z-index:3; background:url(../img/tr.png) 0 0 repeat;}
/* nav 1depth */
nav>ul { width:1200px; height:50px; margin:0 auto; }
nav>ul>li {position:relative; float:left; width:200px; height:50px; text-align:center; box-sizing:border-box; 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) 0 0 repeat; border:1px solid #000; box-sizing:border-box; opacity:0; transition:all 0.5s; padding:10px;}
nav>ul>li:hover div { top:-100px; transform:rotateY(360deg); opacity:1;}
/* 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 {position:absolute; left:0px; bottom:0px; width:100%; }
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; left:0; top:50%; width:100%; height:500px; margin-top:-250px; overflow:hidden; z-index:2; opacity:1; }
section>img {position:absolute; left:0px; top:-150px; width:100%; height:auto;}
/*footer*/
footer { position:fixed; left:0px; bottom:0px; width:100%; height:30px; background:#010101; border-top:1px solid #222; z-index:5; }
footer ul {float:left; width:40%; height:30px; 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 {float:right; font:10px/2 orbitron; color:#666; letter-spacing:1px; margin-right:40px; margin-top:4px;}
JS
point 1 - window 가로값과 마우스포인터 값의 100분율을 구한다.
var percent = Math.floor((posX/wid)*101);
Math.foor 함수를 사용했기 때문에 +1 하여 101을 곱한다.
point2 - 스틸컷 이미지를 모두 불러와서, 해당 이미지만 show시킨다. (마우스포인터값과 연계)
// 변수 imgs에 따옴표만 넣어 빈 문자열을 생성합니다.
var imgs='';
// for문을 이용하여 변수 i를 0부터 199까지 증가시킵니다.
// for(var i=0; i<200; i++){
// // 변수 imgs에 대입연산자를 이용하여 다음의 태그를 계속해서 200개가 될때까지 추가합니다.
// imgs+="<img src='img/pic"+i+".jpg' alt='image'>"
// };
// .html() 구문에 조금 전 태그를 반복하며 생성해둔 변수 imgs를 넣어 다시 section 영역안에 추가합니다.
// $("section").html(imgs);
// 마우스 무브시 안쪽의 구문 실행
$("body").on("mousemove",function(e){
// 변수 wid에 현재 브라우저의 넓이값 저장
var wid = $(window).width();
// 변수 posX에 화면상에 마우스 커서의 위치 저장
var posX = e.pageX;
// 변수 percent에 200까지의 백분율 수치 저장
var percent = Math.floor((posX/wid)*201);
// 해당 백분율 값을 h3에 출력
$("h3").text(percent);
// 모든 img 태그를 숨김 처리
// $("section>img").hide();
// 현재 마우스의 위치에 해당하는 이미지 순서만 보임 처리
// $("section>img").eq(percent).show();
$("section>img").attr('src', 'img/pic'+ percent +'.jpg');
});
// //로딩바
// $('body').jpreLoader({
// splashID: "#jSplash",
// loaderVPos: '48%',
// autoClose: true,
// closeBtnText: "Let's Begin!"
// });
interective4.zip
15.49MB
interective4_2.zip
15.49MB
'Study > Example & Plug-in' 카테고리의 다른 글
| 인터렉티브 웹 5-2 - 3D 회전 플러그인 (0) | 2022.03.17 |
|---|---|
| 인터렉티브 웹 5-2 - 스틸컷 마우스 클릭,드래그 (0) | 2022.03.17 |
| 인터렉티브 웹 4 - z축 원근감 (0) | 2022.03.16 |
| 인터렉티브 웹 3 - 영상제어 (0) | 2022.03.16 |
| 인터렉티브 웹 2 - 원페이지 슬라이드 (0) | 2022.03.15 |
