송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
5581ce21 2 parents e121f239 544f4c28

Merge branch 'temp1' of http://khuhub.khu.ac.kr/2020104743/EMOJI-HUMAN into temp1

Expand all
Inline Side-by-side
Showing 9 changed files with 416 additions and 260 deletions
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Demo: CSS scroll down button</title>
<link rel="stylesheet" href="./style.css">
<!-- 메세지 버블 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- 배경 스크롤 -->
<section id="section01" class="demo">
<h1 class="animated fadeOutUp">Emoji Human, Who are you?</h1>
<h2 class="animated fadeOutUp">이모지 인간의 정체가 궁금해요.</h2>
<h3 class="animated2 fadeIn">이모지일까요, 인간일까요?<br>
직접 대화하면서 차근차근 알아가봅시다!</h3>
<a href="#section02"><span></span></a>
</section>
<section id="section02" class="demo">
<!-- 1번 대화 -->
<section>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="from-them">
<p>안녕하세요!!<br>
저는 이모지 인간이라고 해요 @.@ <br>
당신을 만나게 되어서 매우 반가워요 :)
</p>
</div>
<div class="clear"></div>
<div class="from-me slam">
<p>말풍선을 눌러 이모지 인간에게 인사하기</p>
</div>
<div class="clear"></div>
</section>
<!-- 1번 대화 -->
</section>
<section id="section03" class="demo">
<!-- 2번 대화 -->
<section>
<div class="from-me gentle">
<p>이모지 인간은 뭔가요...?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>이모지 인간은 말그대로
“이모지”로 이루어진 인격체입니다.
여러분이 알고 계시는 다양한 이모지들이 있죠?
저는 그 어떤 모습의 이모지든 다 될 수 있어요.
이모지 자체가 저의 몸이라고 생각하시면 됩니다.
예를 들어, 옆의 태양이나 파라솔까지도요!
(하지만, 저는 인격체이기 때문에 말도 할 수 있어요V) </p>
</div>
</section>
<!-- 2번 대화 -->
</section>
<section id="section04" class="demo">
<!-- 3번 대화 -->
<section>
<div class="from-me gentle">
<p>어...이모지 인간은 어떻게 생겨났나요?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>요즘 10대-20대들은 SNS 사용시,
주로 이모지를 사용하여 대화를 하곤 합니다.
문자로 길게 설명을 하는 것보다 표정이나 감정들을
직관적으로 전달할 수 있는 이모지가
더 간편하기에 그렇습니다.
이에 현대인들의 일상은 이모지로 가득 찬,
“<이모지 인간>이 아닐까”
하는 발상에서 제가 생겨나게 되었답니다.</p>
</div>
</section>
<!-- 3번 대화 -->
</section>
<section id="section05" class="demo">
<!-- 4번 대화 -->
<section>
<div class="from-me gentle">
<p>그럼 이모지 인간은 뭘할 수 있나요?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>첫째, 저와의 간단한 대화!
둘째, 이모지로 보내는 문자!
셋째, 이모지 MBTI 카드!</p>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="from-them">
<p>첫번째...보다는
두번째와 세번째에 대한 설명을 더 해볼께요...
이모지로 보내는 문자는 Emo-ssage라고 해요.
아무에게나, 혹은 특정 상대에게 자유롭게 문자를 보내면,
대화 중 일부를 이모지로 채워줄 거랍니다.
작성이 완료되면 여러분만의 emo-ssage를
이미지로 저장할 수 있어요!</p>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="from-them">
<p>이모지 MBTI 카드는 EMOTI라고 해요.
여러 이모지들을 활용해서 각 16개 mbti
고유의 이모지들을 탄생시켰어요.
아, 그리고 각 mbti 카드를 넘길 때마다
어울리는 노래도 흘러나온답니다! </p>
</div>
</section>
<!-- 4번 대화 -->
</section>
<section id="section06" class="demo">
<!-- 5번 대화 -->
<section>
<div class="from-me gentle">
<p>네...아, 아까 정의가 조금 헷갈리는데, 이모지 인간은 이모지인가요 인간인가요?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>This page cannot be found</p>
</div>
</section>
<!-- 5번 대화 -->
</section>
<!-- partial -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
<!-- 배경 스크롤 -->
<!-- 메세지 버블 -->
<script src="./script.js"></script>
</body>
</html>
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
\ No newline at end of file
This diff is collapsed. Click to expand it.
......@@ -4,33 +4,23 @@
<head>
<meta charset="UTF-8">
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="/EMO-SSAGE/EMO-SSAGE.css">
<link rel="stylesheet" href="/index.css">
<!-- <link rel="stylesheet" href="/EMO-SSAGE/EMO-SSAGE.css"> -->
<link rel="stylesheet" href="/EMO-SSAGE/emossage.css">
<script src="/EMO-SSAGE/emossage.js" type="text/javascript"></script>
<link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
/* body {
background-image: url("emossage-03.png");
background-repeat: no-repeat;
background-size: 100%;
font-family: Noto Sans KR, regular;
text-align: center;
}
h1 {
font-size: 50px;
}
p1 {
font-size: 24px;
}
p2 {
font-size: 14px
body {
font-family: Noto Sans KR, regular;
text-align: center;
}
p2.small {
line-height: 0.7;
} */
h1 {font-size: 50px;}
p1 {font-size: 24px;}
p2 {font-size: 14px}
p2.small {line-height: 0.7;}
</style>
<div style="height: 100px; overflow: auto">
</div>
......@@ -38,14 +28,15 @@
</head>
<body>
<body style="margin: 0 auto">
<!-- 큰 묶음은 배경임 -->
<div id="gradient-bg">
<!-- 내비게이션 -->
<link rel="stylesheet" href="/external/bootstrap.min.css"><!--bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
<!--css link-->
<link rel="stylesheet" href="/external/font-awesome.min.css"><!--for icons-->
<script src="/external/ajax/jquery.min.js"></script><!--jquery script-->
<script src="/external/bootstrap/bootstrap.min.js"></script><!--bootstrap script-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
<body id="page-top">
<!--creating a navigation bar-->
......@@ -66,65 +57,57 @@
<li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
<li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
</ul>
</div><!--end of collapse-->
</div>
</div>
</nav>
<!-- 내비게이션 -->
<body>
<form action="#">
<!-- <header>
<header>
<h1>Message + EMOJI<span>= Emossage</span></h1>
<p1>Emoti는 이모지 중심 메세지입니다</p1>
<br>
<p2>
<p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
여러분만의 이모지 편지를 적어보세요<br>
</p2>
여러분만의 이모지 편지를 적어보세요<br> </p2>
</p>
</header> -->
<p id="p1" class="animated fadeOutUp">Message + EMOJI<span>= Emossage</p>
<br>
<p id="p2" class="animated fadeOutUp">Emoti는 이모지 중심 메세지입니다</p>
</header>
<br>
<br>
<br>
<p id="p3" class="animated2 fadeIn">글자 중 일부가 이모지로 변환됩니다.</p>
<p id="p4" class="animated2 fadeIn">여러분만의 이모지 편지를 적어보세요</p>
<div>
<label class="desc" id="title1" for="Field1">Full Name</label>
<div>
<input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
</div>
</div>
<div>
<label class="desc" id="title3" for="Field3">
Email
</label>
<div>
<input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
</div>
</div>
<br>
<br>
<br>
<br>
<div style="position: relative; left: 37.5%; top: 50%;">
<div>
<label class="desc" id="title4" for="Field4">
Message
</label>
<div>
<textarea style="resize: none;" id="Field4" name="Field4" placeholder="이모지로 변환할 문장을 입력해보세요!" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
<textarea id="Field4" name="Field4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
</div>
<div>
<button type="button" onclick="convertToEmoji()">Submit</button>
<input id="saveForm" name="saveForm" type="submit" value="Submit">
</div>
</div>
<div style="position: relative; left: 37.5%; top: 50%;">
<label class="desc" id="title5" for="Field5">
Result
</label>
</form>
<div>
<textarea style="resize: none;" id="Field5" name="Field5" readonly spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
</div>
</div>
</form>
</body>
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
......@@ -248,7 +248,7 @@ img {
/* 내비 */
body {
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-family: Noto Sans Kr, Bold;
overflow-x: hidden;
}
.center
......@@ -269,7 +269,7 @@ a:active,{
h2,
h3,
{
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: Noto Sans Kr, Bold;
text-transform: uppercase;
font-weight: 700;
font-size: 30px;
......@@ -318,7 +318,7 @@ header .container {
}
header .intro .name {
display: block;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: Noto Sans Kr, Bold;
text-transform: uppercase;
font-weight: 700;
font-size: 2em;
......@@ -341,7 +341,7 @@ header .intro .skills {
}
.navbar-custom {
background: #2C3E50;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: Noto Sans Kr, Bold;
text-transform: uppercase;
font-weight: 700;
border: none;
......@@ -433,7 +433,7 @@ body {
/* text fade in */
@import url(/external/raleway);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
.animated{
-webkit-animation-fill-mode:both;
......@@ -480,10 +480,6 @@ body {
/* text fade in */
/* 텍스트 */
#p1 {
font-size: 50px;
......
:root {
--FACE_WIDTH: 450px;
--FACE_HEIGHT: 450px;
--SHINE_WIDTH: calc(calc(194/230) * var(--FACE_WIDTH));
--SHINE_HEIGHT: calc(calc(206/230) * var(--FACE_HEIGHT));
--EYE_WIDTH: calc(calc(24/230) * var(--FACE_WIDTH));
--EYE_HEIGHT: calc(calc(38/230) * var(--FACE_HEIGHT));
--EYE_LEFT_RIGHT: calc(calc(70/230) * var(--FACE_WIDTH));
--EYE_LEFT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
--EYE_RIGHT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
--EYE_RIGHT_LEFT: calc(calc(70/230) * var(--FACE_WIDTH));
--MOUTH_TOP: calc(calc(88/230) * var(--FACE_HEIGHT));
--MOUTH_WIDTH: calc(calc(94/230) * var(--FACE_WIDTH));
--MOUTH_HEIGHT: calc(calc(48/230) * var(--FACE_HEIGHT));
--MOUTH_BEFORE_BOTTOM: calc(calc(10/230) * var(--FACE_HEIGHT));
--MOUTH_AFTER_BOTTOM: calc(calc(26/230) * var(--FACE_HEIGHT));
}
/* 이모지 얼굴 */
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#emoji {
position: relative;
width: var(--FACE_WIDTH);
height: var(--FACE_HEIGHT);
transform: translate3d(0, 0, 0);
}
.layer {
position: absolute;
width: 100%;
height: 100%;
}
.face {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: var(--FACE_WIDTH);
height: var(--FACE_HEIGHT);
background-color: #FECA32;
border-radius: 100%;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px;
}
.shine {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: var(--SHINE_WIDTH);
height: var(--SHINE_HEIGHT);
background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
border-radius: 100%;
opacity: 0.8;
}
.eye {
width: var(--EYE_WIDTH);
height: var(--EYE_HEIGHT);
background-color: #A1620F;
border-radius: 100%;
box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px, rgba(255, 255, 255, 0.2) 0 2px 0 2px;
-webkit-animation: blink 5s infinite;
animation: blink 5s infinite;
}
.eye.left {
position: absolute;
top: 0;
right: var(--EYE_LEFT_RIGHT);
bottom: var(--EYE_LEFT_BOTTOM);
left: 0;
margin: auto;
}
.eye.right {
position: absolute;
top: 0;
right: 0;
bottom: var(--EYE_RIGHT_BOTTOM);
left: var(--EYE_RIGHT_LEFT);
margin: auto;
}
.mouth {
position: absolute;
top: var(--MOUTH_TOP);
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: hidden;
width: var(--MOUTH_WIDTH);
height: var(--MOUTH_HEIGHT);
transform: translate3d(0, 0, 0);
}
.mouth:before {
position: absolute;
top: 0;
right: 0;
bottom: var(--MOUTH_BEFORE_BOTTOM);
left: 0;
margin: auto;
content: "";
width: 100%;
height: 100%;
background-color: #6E440B;
border-radius: 100%;
box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0;
transform: scale(1);
}
.mouth:after {
position: absolute;
top: 0;
right: 0;
bottom: var(--MOUTH_AFTER_BOTTOM);
left: 0;
margin: auto;
content: "";
width: calc(100% - 20px);
height: 100%;
background-color: #FECA32;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px;
transform-origin: 50% 100%;
transform: scale(1.6);
}
@-webkit-keyframes blink {
0%, 96% {
transform: scaleY(1);
}
98% {
transform: scaleY(0.1);
}
100% {
transform: scaleY(1);
}
}
@keyframes blink {
0%, 96% {
transform: scaleY(1);
}
98% {
transform: scaleY(0.1);
}
100% {
transform: scaleY(1);
}
}
/* 이모지 얼굴 */
/* 내비 */
body {
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-family: Noto Sans Kr, Bold;
overflow-x: hidden;
}
.center
......@@ -21,7 +183,7 @@ a:active {
h2,
h3
{
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: Noto Sans Kr, Bold;
text-transform: uppercase;
font-weight: 700;
font-size: 30px;
......@@ -70,7 +232,7 @@ header .container {
}
header .intro .name {
display: block;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: Noto Sans Kr, Bold;
text-transform: uppercase;
font-weight: 700;
font-size: 2em;
......@@ -93,7 +255,7 @@ header .intro .skills {
}
.navbar-custom {
background: #2C3E50;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: Noto Sans Kr, Bold;
text-transform: uppercase;
font-weight: 700;
border: none;
......
......@@ -116,171 +116,11 @@
}
/*-----------배경 그라디언트-----------*/
:root {
--FACE_WIDTH: 450px;
--FACE_HEIGHT: 450px;
--SHINE_WIDTH: calc(calc(194/230) * var(--FACE_WIDTH));
--SHINE_HEIGHT: calc(calc(206/230) * var(--FACE_HEIGHT));
--EYE_WIDTH: calc(calc(24/230) * var(--FACE_WIDTH));
--EYE_HEIGHT: calc(calc(38/230) * var(--FACE_HEIGHT));
--EYE_LEFT_RIGHT: calc(calc(70/230) * var(--FACE_WIDTH));
--EYE_LEFT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
--EYE_RIGHT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
--EYE_RIGHT_LEFT: calc(calc(70/230) * var(--FACE_WIDTH));
--MOUTH_TOP: calc(calc(88/230) * var(--FACE_HEIGHT));
--MOUTH_WIDTH: calc(calc(94/230) * var(--FACE_WIDTH));
--MOUTH_HEIGHT: calc(calc(48/230) * var(--FACE_HEIGHT));
--MOUTH_BEFORE_BOTTOM: calc(calc(10/230) * var(--FACE_HEIGHT));
--MOUTH_AFTER_BOTTOM: calc(calc(26/230) * var(--FACE_HEIGHT));
}
/* 이모지 얼굴 */
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#emoji {
position: relative;
width: var(--FACE_WIDTH);
height: var(--FACE_HEIGHT);
transform: translate3d(0, 0, 0);
}
.layer {
position: absolute;
width: 100%;
height: 100%;
}
.face {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: var(--FACE_WIDTH);
height: var(--FACE_HEIGHT);
background-color: #FECA32;
border-radius: 100%;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px;
}
.shine {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: var(--SHINE_WIDTH);
height: var(--SHINE_HEIGHT);
background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
border-radius: 100%;
opacity: 0.8;
}
.eye {
width: var(--EYE_WIDTH);
height: var(--EYE_HEIGHT);
background-color: #A1620F;
border-radius: 100%;
box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px, rgba(255, 255, 255, 0.2) 0 2px 0 2px;
-webkit-animation: blink 5s infinite;
animation: blink 5s infinite;
}
.eye.left {
position: absolute;
top: 0;
right: var(--EYE_LEFT_RIGHT);
bottom: var(--EYE_LEFT_BOTTOM);
left: 0;
margin: auto;
}
.eye.right {
position: absolute;
top: 0;
right: 0;
bottom: var(--EYE_RIGHT_BOTTOM);
left: var(--EYE_RIGHT_LEFT);
margin: auto;
}
.mouth {
position: absolute;
top: var(--MOUTH_TOP);
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: hidden;
width: var(--MOUTH_WIDTH);
height: var(--MOUTH_HEIGHT);
transform: translate3d(0, 0, 0);
}
.mouth:before {
position: absolute;
top: 0;
right: 0;
bottom: var(--MOUTH_BEFORE_BOTTOM);
left: 0;
margin: auto;
content: "";
width: 100%;
height: 100%;
background-color: #6E440B;
border-radius: 100%;
box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0;
transform: scale(1);
}
.mouth:after {
position: absolute;
top: 0;
right: 0;
bottom: var(--MOUTH_AFTER_BOTTOM);
left: 0;
margin: auto;
content: "";
width: calc(100% - 20px);
height: 100%;
background-color: #FECA32;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px;
transform-origin: 50% 100%;
transform: scale(1.6);
}
@-webkit-keyframes blink {
0%, 96% {
transform: scaleY(1);
}
98% {
transform: scaleY(0.1);
}
100% {
transform: scaleY(1);
}
}
@keyframes blink {
0%, 96% {
transform: scaleY(1);
}
98% {
transform: scaleY(0.1);
}
100% {
transform: scaleY(1);
}
}
/* 이모지 얼굴 */
/* 내비 */
body {
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-family: Noto Sans Kr, Bold;
overflow-x: hidden;
}
.center
......@@ -301,7 +141,7 @@ a:active,{
h2,
h3,
{
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: Noto Sans Kr, Bold;
text-transform: uppercase;
font-weight: 700;
font-size: 30px;
......@@ -350,7 +190,7 @@ header .container {
}
header .intro .name {
display: block;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: Noto Sans Kr, Bold;
text-transform: uppercase;
font-weight: 700;
font-size: 2em;
......@@ -373,7 +213,7 @@ header .intro .skills {
}
.navbar-custom {
background: #2C3E50;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: Noto Sans Kr, Bold;
text-transform: uppercase;
font-weight: 700;
border: none;
......@@ -444,7 +284,7 @@ body{
width: 100%;
height: 100vh;
background: #000;
font-family: 'Oswald', sans-serif;
font-family: Noto Sans Kr, Bold;
}
#text {
......
......@@ -45,30 +45,9 @@
</nav>
<!-- 내비게이션 -->
<!-- 이모지 얼굴 -->
<div style="width: 100%; display: flex; justify-content: space-around; margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2;">
<ul id="emoji">
<li class="layer" data-depth="0.2">
<div class="face"></div>
</li>
<li class="layer" data-depth="0.3">
<div class="shine"></div>
</li>
<li class="layer" data-depth="0.8">
<div class="eye left"></div>
</li>
<li class="layer" data-depth="0.8">
<div class="eye right"></div>
</li>
<li class="layer" data-depth="0.8">
<div class="mouth"></div>
</li>
</ul>
<script src='/external/ajax/parallax.min.js'></script><script src="/face.js"></script>
<div style="float: left; width: 100%;">
<img src="/src/3d_crossword-01.png" style="display: block; margin: 0 auto; width: 750px; height:750px;">
</div>
<!-- 이모지 얼굴 -->
<!-- 이모지 레인 -->
<div style="z-index: 1;">
......