송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
3b2d547e 1 parent cdeb05a3

check

Expand all
Inline Side-by-side
Showing 12 changed files with 389 additions and 81 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.
......@@ -117,7 +117,7 @@ body {
}
@media (min-width: 800px) {
.page-content {
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(3, 1fr);
}
}
......@@ -329,6 +329,7 @@ body {
font-family: Noto Sans KR;
text-align: center;
}
/* 텍스트 */
......
This diff is collapsed. Click to expand it.
......@@ -2,73 +2,101 @@
<html lang="ko">
<head>
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css">
<link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
<style>
body {
background-image: url("emossage-03.png");
background-repeat: no-repeat;
background-size: 100%;
font-family: Noto Sans KR, regular;
text-align: center;
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="/index.css">
<link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
<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>
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>
<form action="#">
<header>
<h1>Message + EMOJI<span>= Emossage</span></h1>
<p1>Emoti는 이모지 중심 메세지입니다</p1>
<br>
<p2>
<p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
여러분만의 이모지 편지를 적어보세요<br> </p2>
</p>
</header>
<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>
<div>
<label class="desc" id="title4" for="Field4">
Message
</label>
<div>
<textarea id="Field4" name="Field4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
</div>
<div>
<input id="saveForm" name="saveForm" type="submit" value="Submit">
</div>
</div>
</form>
</body>
<form action="#">
<header>
<h1>Message + EMOJI<span>= Emossage</span></h1>
<p1>Emoti는 이모지 중심 메세지입니다</p1>
<br>
<p2>
<p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
여러분만의 이모지 편지를 적어보세요<br>
</p2>
</p>
</header>
<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>
<div>
<label class="desc" id="title4" for="Field4">
Message
</label>
<div>
<textarea id="input" class="h-350" name="text_1" spellcheck="true" rows="10" cols="50" tabindex="4" placeholder="이모지로 변환할 문장을 입력해주세요"></textarea>
</div>
<div>
<div id="checkPlag" class="btn" onclick="updateOutput()" style="margin: 0 auto;display: block;margin-top: 10px;cursor:pointer; box-sizing:border-box;width:250px">Generate</div>
</div>
</div>
<div>
<label class="result" id="title5" for="Field5">
Emo-ssage
</label>
<div>
<div id="output" class="h=350" name="text_2" style="font-family: Arial, Helvetica, sans-serif; overflow-y: auto;max-height: 350px;"></p>
</div>
</div>
<script src="/EMO-SSAGE/emossage.js"/>
</form>
</body>
\ No newline at end of file
......
This diff could not be displayed because it is too large.
......@@ -7,7 +7,7 @@
.swiper-container {
width: 100%;
height: 70%;
height: auto;
}
.swiper-slide {
......@@ -427,3 +427,87 @@ body {
background-repeat: no-repeat;
}
/* 그라디언트 배경 */
/* 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
......
......@@ -46,6 +46,7 @@
</nav>
<!-- 내비게이션 -->
<br>
<br>
<br>
......@@ -53,22 +54,19 @@
<br>
<br>
<br>
<p id="p1" class="animated fadeOutUp">MBTI+EMOJI=EMOTI</p>
<br>
<p id="p2" class="animated fadeOutUp">MBTI가 이모지라면? 그건 바로 EMOTI!</p>
<br>
<br>
<br>
<p id="p3" class="animated2 fadeIn">당신의 MBTI가 이모지로 어떻게 바뀌었을지</p>
<p id="p4" class="animated2 fadeIn">아래의 카드에서 한 번 찾아보세요!</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="swiper-container">
......
......@@ -18,6 +18,7 @@ const audios = [
document.getElementById("enfj_audio"),
];
const numMbtis = 16;
const slidesPerView = 5;
/* ========
Debugger plugin, simple demo plugin to console.log some of callbacks
......@@ -48,9 +49,9 @@ function myPlugin({ swiper, extendParams, on }) {
console.log('sliderMove');
});
on('slideChange', () => {
audios[(swiper.previousIndex + numMbtis - 5) % numMbtis].pause();
audios[(swiper.previousIndex + numMbtis - 5) % numMbtis].currentTime = 0;
audios[(swiper.activeIndex + numMbtis - 5) % numMbtis].play();
audios[(swiper.previousIndex + numMbtis - slidesPerView) % numMbtis].pause();
audios[(swiper.previousIndex + numMbtis - slidesPerView) % numMbtis].currentTime = 0;
audios[(swiper.activeIndex + numMbtis - slidesPerView) % numMbtis].play();
if (!swiper.params.debugger) return;
console.log('slideChange', swiper.previousIndex, '->', swiper.activeIndex);
});
......@@ -92,7 +93,7 @@ Swiper.use([myPlugin]);
let swiper = new Swiper('.swiper-container', {
loop: true,
centeredSlides: true,
slidesPerView: '5',
slidesPerView: slidesPerView,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
......