인터렉티브 웹 3 - 영상제어
2022. 3. 16. 10:54ㆍStudy/Example & Plug-in
HTML
<!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>인터렉티브 웹 2</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">
<!-- 로고 영역 -->
<h1>
<strong>Paris</strong> <br />
<img src="img/logo.png"><br />
<span>Exceptional Creation</span>
</h1>
<!-- 슬로건 영역 -->
<p class="txt">
French Jewelry & <span>Watch Maker</span>
</p>
<!-- 웹 아이콘 버튼 모음 -->
<ul class="sns">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
</ul>
<!-- section 영역 -->
<section class="contents">
<!-- article 영역 -->
<article>
<h2>Jewelry</h2>
<video loop preload="auto">
<source src="img/vid1.mp4" type="video/mp4">
</video>
<div></div>
<h3>Jewelry</h3>
<p>
Nulla ex risus, varius at mauris quis, fringilla accumsan urna. Cras eleifend tempor nunc id cursus. Mauris in elit ut risus feugiat tincidunt a nec erat. Donec ornare finibus massa. In facilisis finibus rutrum. Sed tempor vitae erat sit amet molestie. Integer eros tellus, molestie a dictum sit amet, lobortis non turpis.
</p>
</article>
<!-- article 영역 -->
<article>
<h2>Watches</h2>
<video loop preload="auto">
<source src="img/vid2.mp4" type="video/mp4">
</video>
<div></div>
<h3>Watches</h3>
<p>
Nulla ex risus, varius at mauris quis, fringilla accumsan urna. Cras eleifend tempor nunc id cursus. Mauris in elit ut risus feugiat tincidunt a nec erat. Donec ornare finibus massa.
</p>
</article>
<!-- article 영역 -->
<article>
<h2>Accessories</h2>
<video loop preload="auto">
<source src="img/vid3.mp4" type="video/mp4">
</video>
<div></div>
<h3>Accessories</h3>
<p>
Nulla ex risus, varius at mauris quis, fringilla accumsan urna. Cras eleifend tempor nunc id cursus. Mauris in elit ut risus feugiat tincidunt a nec erat. Donec ornare finibus massa. In facilisis finibus rutrum. Sed tempor vitae erat sit amet molestie.
</p>
</article>
<!-- article 영역 -->
<article>
<h2>Gifts</h2>
<video loop preload="auto">
<source src="img/vid4.mp4" type="video/mp4">
</video>
<div></div>
<h3>Gifts</h3>
<p>
Nulla ex risus, varius at mauris quis, fringilla accumsan urna. Cras eleifend tempor nunc id cursus. Mauris in elit ut risus feugiat tincidunt a nec erat. Donec ornare finibus massa. In facilisis finibus rutrum. Sed tempor vitae erat sit amet molestie. Integer
</p>
</article>
</section>
<!-- footer -->
<footer>
<ul>
<li><a href="#">sitemap</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">community</a></li>
</ul>
<span>copyright 2015 Cartier All right reserved.</span>
</footer>
</div>
</body>
</html>
CSS
@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Raleway);
/* Reset CSS */
* { margin:0; padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#bbb;}
img { border:0;}
body{position:fixed; width: 100%; height: 100%; font-family: Raleway, sans-serif; line-height: 1.8;}
/* 배경이미지 설정*/
.wrap {position:fixed; width:100%; height:100%; min-width:1024px; min-height:768px; background:url(../img/bg.jpg) center bottom no-repeat; background-size:cover;}
/* 로고 영역 */
.wrap h1 {position:fixed; left:0px; top:240px; width:300px; text-align:center; line-height:0.8;}
.wrap h1 strong {font-size:16px; line-height:1.1; color:#333;}
.wrap h1 img {width:200px; height:auto;}
.wrap h1 span {font-size:12px; font-weight: 700; line-height: 1.6; color:#444; letter-spacing:5px;}
/* 슬로건 영역*/
.txt {position:fixed; left:40px; top:400px; font-size:30px; line-height: .8; color:#111; letter-spacing:0px;}
.txt span {font-size:30px; color:#888;}
/* 웹 아이콘 버튼 모음 */
.sns {position:fixed; right:50px; top:30px; z-index:10;}
.sns li {float:left; margin-left:30px;}
.sns li a {color:#555; font-size:22px;}
/* section 영역 레이아웃 */
section {position:fixed; right:0px; top:0px; width:100%; height:100%;}
article {float:right; position:relative; width:12%; height:100%; background:url(../img/divider.png) left center no-repeat; overflow:hidden;}
/* article 제목 */
article h2 {position:absolute; left:20px; top:300px; padding-left:15px; border-left:3px solid #555; font:bold 20px Raleway; color:#666; z-index:3; transition:all 0.5s;}
article div {position:absolute; left:0px; top:300px; width:100%; height:0px; background:#000; opacity:0.5; z-index:2; transition:all 0.5s;}
/* article 제목 호버 효과 */
article:hover h2 {color:#ccc; border-left:3px solid #ccc;}
article:hover div {top:270px; height:70px;}
/* article 동영상 */
article video {position:absolute; width:auto; height:100%; margin-top:0px; margin-left:-100px; opacity:0; z-index:1;}
/* article 숨겨진 컨텐츠 */
article h3 {position:absolute; right:-310px; bottom:210px; font: 40px Raleway; color:#fff; text-align:right; opacity:1; z-index:4;}
article p { position:absolute; right:-310px; bottom:50px; width:300px; height:150px; font:12px/1.5 arial; color:#fff; text-align:right; opacity:0.8; z-index:5;}
/* footer */
footer {position:fixed; left:0px; bottom:0px; width:100%; height:40px; background:#000; font:12px/3.3 verdana; color:#fff; letter-spacing:2px; opacity:0.4; z-index:10;}
footer ul {position:absolute; left:50px; bottom:0px;}
footer ul li {float:left; margin-right:40px;}
footer span {position:absolute; right:50px; bottom:0px;}
JS
mouseover, mouseout을 사용할 경우 마우스 이벤트가 자식요소에게 상속되어 덜덜거릴 수 있으므로 mouseenter, mouseleave를 사용한다.
// 마우스 오버시
$("article").on("mouseenter",function(){ //mouseenter 이벤트 사용가능
// 변수 vid에 video파일 참조
var vid = $(this).find("video").get(0);
// 동영상의 재생위치를 처음(0)으로 설정
vid.currentTime=0;
// 동영상을 재생
vid.play();
$(this).stop().animate({"width":"35%"},1000,function(){
//article이 넓어진 바로 후에 아래 구문이 실행됩니다.
$(this).find("h3").stop().animate({"right":"10px"},400);
$(this).find("p").stop().animate({"right":"10px"},800);
});
$(this).find("video").stop().animate({"opacity":"0.9"},1200);
});
// 마우스 아웃시
$("article").on("mouseleave",function(){ //mouseleave 이벤트 사용가능
// 변수 vid에 video파일 참조
var vid = $(this).find("video").get(0);
// 동영상을 정지
vid.pause();
$(this).stop().animate({"width":"12%"},700);
$(this).find("video").stop().animate({"opacity":"0"},2000);
$(this).find("h3").stop().animate({"right":"-310px"},200);
$(this).find("p").stop().animate({"right":"-310px"},500);
});
'Study > Example & Plug-in' 카테고리의 다른 글
| 인터렉티브 웹 5 - 스틸컷 마우스제어 (0) | 2022.03.17 |
|---|---|
| 인터렉티브 웹 4 - z축 원근감 (0) | 2022.03.16 |
| 인터렉티브 웹 2 - 원페이지 슬라이드 (0) | 2022.03.15 |
| 인터렉티브 웹 1 - 3D rotate (0) | 2022.03.15 |
| 반응형 네비게이션 2 (0) | 2022.01.11 |
