<iframe width="854" height="480" src="https://www.youtube.com/embed/영상코드" frameborder="0" allowfullscreen></iframe>
<!DOCTYPE html>
<html>
<!-- Author information
* html, css, javascript
* written by hepheir@gmail.com
*
* site designed by
* dfc7936@naver.com & hepheir@gmail.com
*
-->
<head>
<meta charset="utf-8">
<meta name="author" content="hepheir">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<title>UNIT & MMC</title>
<script>
var delayTime = 720; // 요소들이 나타나는데에 걸리는 시간 (단위: ms = 1/1000 second)
var status = 0;
function setStatus(){ // 애니매이션이 끝났는지 아닌지의 상태
status = 1;
}
function performance(){
$('div.MMC_logo').delay(delayTime).fadeIn(delayTime);
$('p.menu_1').delay(delayTime * 2).fadeIn(delayTime);
$('p.menu_2').delay(delayTime * 3).fadeIn(delayTime);
$('p.menu_3').delay(delayTime * 4).fadeIn(delayTime);
$('p.MMC_desc_1').delay(delayTime * 5).fadeIn(delayTime * 2);
$('p.MMC_desc_2').delay(delayTime * 5).fadeIn(delayTime * 2);
$('p.MMC_desc_3').delay(delayTime * 5).fadeIn(delayTime * 2);
setTimeout(setStatus,delayTime * 6); // 모든 애니메이션이 실행 된 후 div.sketch가 나타날 수 있게 끔 설정
}
function guide(){
if(status==0){ //애니메이션 보기 싫을 때 빠른 스킵
$('div.MMC_logo').show();
$('p.menu_1').show();
$('p.menu_2').show();
$('p.menu_3').show();
$('p.MMC_desc_1').show();
$('p.MMC_desc_2').show();
$('p.MMC_desc_3').show();
setTimeout(setStatus,delayTime);
}
}
//창 크기에 따른 폰트 사이즈 조절
var w = window.innerWidth;
if (w < 350){
document.write('<style>body{font-size:18px;}.variable{display:none;}</style>');
}
else if (w < 400){
document.write('<style>body{font-size:16px;}</style>');
}
else if(w < 560){
document.write('<style>body{font-size:18px;}</style>');
}
else if(w < 610){
document.write('<style>body{font-size:18px;}</style>');
}
else if (w < 710){
document.write('<style>body{font-size:20px;}</style>');
}
else{
document.write('<style>body{font-size:24px;}</style>');
};
//중국어 시간에 쓰셈
function singMode(){
$('div.bodyClearfix').fadeOut(delayTime);
$('#MMC_desc').fadeOut(delayTime);
status = 0;
$('#lyricWrap').delay(delayTime).fadeIn(delayTime);
}
</script>
</head>
<body>
<div id="background">
<div class="shadow"></div>
</div>
<div id="bodyWrap" onclick="guide();">
<div class="bodyClearfix">
<header>
<div class="MMC_logo hidden"></div>
<nav class="menu">
<table class="menu">
<td class="menu_Ltd"><a title="예매하기" href="/book">
<p class="menu_text menu_1 hidden">tickets</p>
</a></td>
<td class="menu_td"><a title="상영작/연극 소개" href="/info">
<p class="menu_text menu_2 hidden">introduction</p>
</a></td>
<td class="menu_Rtd"><a title="비트랑 클라우드와는 클라스가 다른 보정 최강 자율동아리" href="http://project-unit.tistory.com" target="_blank">
<p class="menu_text menu_3 hidden"><span class="variable">team </span>unit</p>
</a></td>
</table>
</nav>
</header>
</div>
<div id="MMC_desc">
<p class="MMC_desc_1 hidden">mov<span style="color:#dddddd;" onclick="$('#unrespectedBreak').show();singMode()">i</span>e</p>
<p class="MMC_desc_2 hidden">manufactur<span style="color:#dddddd;" onclick="$('#nightScean').show();singMode()">i</span>ng</p>
<p class="MMC_desc_3 hidden">club</p>
</div>
<div id="lyricWrap" class="hidden">
<div id="unrespectedBreak" class="hidden">
<div id="youtubeContainer">
<iframe id="youtube" src="https://www.youtube.com/embed/KcZYJNe8SOw?color=white" frameborder="0" allowfullscreen></iframe>
</div>
<h2 onclick="location.reload();">존중받지 못한 이별 <span class="titleCap">-라데-</span></h2>
<p onclick="$('div#youtubeContainer').slideUp(delayTime);">헤어지잔 그런 말</p>
<p onclick="$('div#youtubeContainer').slideDown(delayTime);">너무 쉽게 뱉었던 그 말</p>
<p>너무 아픔만 주던 그런 말</p>
<p><br /></p>
<p>너의 미소가 보고 싶어</p>
<p>작은 선물도 준비해봐도</p>
<p>떠난 너의 마음을 붙잡지 못해</p>
<p><br /></p>
<p>(난 이젠)</p>
<p>버려질 우리 둘 (사이에)</p>
<p>남겨질 추억 그 (자리에)</p>
<p>이제는 가득 채워진 그의 생각만</p>
<p><br /></p>
<p>그대를 사랑한 나는 어떡하라고</p>
<p>내 안에서 쉽게 사라지지도 않을 사람</p>
<p><br /></p>
<p>오 네가 뭐라고</p>
<p>존중받지 못했던 이별에도 난</p>
<p>너를 보내줘야만 하니</p>
<p><br /></p>
<p>너 떠난 그 자리엔</p>
<p>홀로 지낼 하루만 남아</p>
<p>일어설 이유 없는 내일만 남아</p>
<p><br /></p>
<p>너의 목소리를 듣고 싶어</p>
<p>나의 하루를 남겨봐도</p>
<p>떠난 너의 마음을 붙잡지 못해</p>
<p><br /></p>
<p>(난 이젠)</p>
<p>버려질 우리 둘 (사이에)</p>
<p>남겨질 추억 그 (자리에)</p>
<p>이제는 가득 채워진 그의 생각만</p>
<p><br /></p>
<p>그대를 사랑한 나는 어떡하라고</p>
<p>내 안에서 쉽게 사라지지도 않을 사람</p>
<p><br /></p>
<p>오 네가 뭐라고</p>
<p>존중받지 못했던 이별에도 난</p>
<p>너를 보내줘야만 하니</p>
<p><br /></p>
<p>I feel down 약간 짜증도 섞여 있는 상태</p>
<p>어설피 웃는 모습도 어색한 것 같아</p>
<p><br /></p>
<p>어이없는 상황 난 반쯤 돈 것 같아</p>
<p>꺼져 나도 네가 필요없단 말이야</p>
<p><br /></p>
<p>어차피 이건 애써 쿨한 척</p>
<p>하려다가 더 망친 기분</p>
<p><br /></p>
<p>다시 네가 온다 해도</p>
<p>I don't wanna talk with you</p>
<p><br /></p>
<p>역겨운 상황 당장 게워내고 싶어</p>
<p>시뻘게진 내 눈에서 이젠 널 씻고 싶어</p>
<p><br /></p>
<p>가지마 가지마 가지마</p>
<p>가지마 너 가지마 제발 제발</p>
<p><br /></p>
<p>(그대없이 난)</p>
<p>그대를 사랑한 나는 어떡하라고</p>
<p>내 안에서 쉽게 사라지지도 않을 사람</p>
<p><br /></p>
<p>오 네가 뭐라고</p>
<p>존중받지 못했던 이별에도 난</p>
<p>너를 보내줘야만 하니</p>
<p><br /></p>
<p>(I don't wanna let you go</p>
<p>어딜 떠나) 가지마</p>
<p>(I don't wanna let you go</p>
<p>거긴 아냐) 가지마</p>
<p>(I don't wanna let you go</p>
<p>정신 나갈 것 같아) 제발</p>
<p><br /></p>
<p>가지마 너 가지마 제발</p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
</div>
<div id="nightScean" class="hidden">
<iframe id="youtube" src="https://www.youtube.com/embed/jNDElcBLINo" frameborder="0" allowfullscreen></iframe>
<h2 title="원곡 - 연인 (박신양)" onclick="location.reload();">야경 <span class="titleCap">-윤종신-</span></h2>
<br/>
<p>다 올라왔어 한눈에 들어온</p>
<p>나의 도시가 아름답구나</p>
<p>방금전까지 날 괴롭히던</p>
<p>그 미로같던 두통같던 그곳이</p>
<p>이토록 아름답다니</p>
<br/>
<p>저기 어디쯤인가 아직거기살고있니</p>
<p>모두들안녕히 잘 계신지</p>
<p>이렇게 넓은 세상에 우리 만난건</p>
<p>그것만으로도 소중해</p>
<p>여기서보니 내가 겪은일</p>
<p>아주 조금한 일 일뿐이야</p>
<p>수많은 불빛 그속에 모두</p>
<p>사랑하고 미워하고 실망하고</p>
<p>그 중에 내 것들 하나</p>
<br/>
<p>저기 어디쯤인가 우리 이별했던곳</p>
<p>유난히 택시 안잡히던날</p>
<p>택시 뒷창으로 보인 마지막모습</p>
<p>멀어질때까지 바라본</p>
<p>모두변했겠지 내가 변한것만큼</p>
<p>그래도 간직하고 있어</p>
<p>너의 그 미소가 나를 향할때 느꼈던</p>
<p>그 포근했던 그 머물것같았던</p>
<br/>
<p>여기어디쯤인가 우리 자주만난곳</p>
<p>많은 약속이 오고갔던곳</p>
<p>마치 너의 목소리가 바람에 실려</p>
<p>왜 잊지 못하냐고 묻네</p>
<br/>
<p>우리 언제쯤인가 마주칠수 있겠지</p>
<p>저 불빛속을 거닐다보면</p>
<p>먼저 알아본사람 나였으면해</p>
<p>난 언제나 바라봤기에</p>
<p>언제나</p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
<p><br /></p>
</div>
</div>
</div>
<script>
performance();
</script>
</body>
</html>
@charset "UTF-8";
iframe#youtube{
width: calc(100% * 23 / 25);
height: 84px;
}
html{
width: 100%;
height: 100%;
font-family: arial;
}
body{
margin: 0;
}
a{
text-decoration: none;
color:inherit;
}
p{
margin:0;
padding: 0;
line-height: 1.2em;
}
.hidden{
display: none;
}
p.menu_text{
text-transform: uppercase;
letter-spacing: -0.1em;
}
#background{
width: calc(100% + 8px);
height: calc(100% + 8px);
margin: -4px -4px -4px -4px;
position: fixed;
background-image: url('./images/Background.jpg');
background-size: cover;
background-position: center;
-webkit-filter: blur(3px);
}
.shadow{
width: 100%;
height: 100%;
background-color: black;
opacity: .3;
}
#bodyWrap{
position: fixed;
margin: 0 0 0 calc(100% * 2 / 27);
width: calc(100% * 25 / 27);
height:100%;
color: white;
overflow-y: auto;
}
div.bodyClearfix{
height: calc(90% - 6em);
min-height: 110px;
margin-right: calc(100% * 2 / 27);
}
div.MMC_logo{
width: 36px;
height: 36px;
padding: 32px calc(50% - 18px) 12px calc(50% - 18px);
background-image: url('./images/MMC_logo.png');
background-size: contain;
background-repeat: no-repeat;
background-origin: content-box;
}
.menu{
width: 100%;
}
td.menu_td{
width: calc(100% * 9 / 23);
text-align: center;
}
td.menu_Ltd{
width: calc(100% * 7 / 23);
text-align: left;
}
td.menu_Rtd{
width: calc(100% * 7 / 23);
text-align: right;
}
#MMC_desc{
text-transform: uppercase;
min-height: 100px;
font-size: 1.8em;
font-weight: 600;
}
#lyricWrap{
padding-top: 48px;
width:100%;
font-size: 16px;
}
.circle{
width:48px;
height:48px;
opacity: .4;
float:right;
-webkit-border-radius: 32px;
color:black;
background-color:white;
}
span.titleCap{
font-size: 0.7em;
}
