송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
3cde542e 1 parent beea3469

2/1

Expand all
Inline Side-by-side
Showing 9 changed files with 333 additions and 220 deletions
{
"liveServer.settings.port": 5501
}
\ No newline at end of file
......@@ -177,4 +177,83 @@ body {
background-repeat: no-repeat;
}
/* 그라디언트 배경 */
\ No newline at end of file
/* text fade in */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
.animated{
-webkit-animation-fill-mode:both;
-webkit-animation-duration:2s;
animation-duration:2s;
}
.animated2{
animation-delay:.5s;
-webkit-animation-delay:.5s;
-webkit-animation-fill-mode:both;
-webkit-animation-duration:2s;
animation-duration:2s;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 0;
-webkit-transform: translateY(1);
-webkit-transform: translateY(40px);
} 100% {
opacity: 1;
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
0%{
opacity: 0;
-webkit-transform: translateY(1);
-webkit-transform: translateY(40px);
}
100% {
opacity: 1;
}
}
/* text fade in */
/* 텍스트 */
#p1 {
font-size: 50px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
#p2{
font-size: 20px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
#p3{
font-size: 15px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
#p4{
font-size: 15px;
color: rgb(0, 0, 0);
font-family: Noto Sans KR;
text-align: center;
}
/* 텍스트 */
\ No newline at end of file
......
......@@ -9,50 +9,75 @@
<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
}
p2.small {
line-height: 0.7;
}
</style>
<div style="height: 100px; overflow: auto">
</div>
</head>
<body style="margin: 0 auto">
<!-- 큰 묶음은 배경임 -->
<div id="gradient-bg">
<!-- 내비게이션 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
<!--css link-->
<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-->
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom-->
<div class="container"><!--gives padding of 16px on LHS and RHS-->
<div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span> Menu <i class="fa fa-bars"></i>
</button>
</div><!--end of button-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
<ul class="nav navbar-nav">
<li><a href="/index.html">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
<li> <a href="/About Us/About Us.html">About Us</a></li>
<li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
<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>
</div>
</nav>
<!-- 내비게이션 -->
<body>
<form action="#">
<br>
<br>
<br>
<br>
<br>
<p id="p1" class="animated fadeOutUp"> EMOJI + MESSAGE = EMOSSAGE</p>
<br>
<p id="p2" class="animated fadeOutUp">Emossage는 이모지 중심 메세지입니다</p>
<header>
<h1>Message + EMOJI<span>= Emossage</span></h1>
<p1>Emoti는 이모지 중심 메세지입니다</p1>
<br>
<p2>
<p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
여러분만의 이모지 편지를 적어보세요<br>
</p2>
</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>
......@@ -95,4 +120,8 @@
</div>
</form>
</div>
<script src="/index.js"></script>
<!-- 큰 묶음은 배경임 -->
</body>
\ No newline at end of file
......
This diff is collapsed. Click to expand it.
......@@ -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: Noto Sans Kr, Bold;
......
......@@ -42,5 +42,30 @@
</div>
</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='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js'></script><script src="/face.js"></script>
</div>
<!-- 이모지 얼굴 -->
</body>
......
......@@ -116,167 +116,7 @@
}
/*-----------배경 그라디언트-----------*/
: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 {
......
......@@ -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='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/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;">
......