송민겸 / EMOJI-HUMAN

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

check

Inline Side-by-side
Showing 12 changed files with 1248 additions and 234 deletions
1 +<!DOCTYPE html>
2 +<html lang="en" >
3 +<head>
4 + <meta charset="UTF-8">
5 + <title>CodePen - Demo: CSS scroll down button</title>
6 + <link rel="stylesheet" href="./style.css">
7 +
8 + <!-- 메세지 버블 -->
9 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
10 +
11 +</head>
12 +<body>
13 +<!-- partial:index.partial.html -->
14 +
15 +<!-- 배경 스크롤 -->
16 + <section id="section01" class="demo">
17 + <h1 class="animated fadeOutUp">Emoji Human, Who are you?</h1>
18 + <h2 class="animated fadeOutUp">이모지 인간의 정체가 궁금해요.</h2>
19 + <h3 class="animated2 fadeIn">이모지일까요, 인간일까요?<br>
20 + 직접 대화하면서 차근차근 알아가봅시다!</h3>
21 + <a href="#section02"><span></span></a>
22 + </section>
23 +
24 +
25 + <section id="section02" class="demo">
26 + <!-- 1번 대화 -->
27 + <section>
28 + <br>
29 + <br>
30 + <br>
31 + <br>
32 + <br>
33 + <br>
34 + <br>
35 + <br>
36 + <br>
37 + <br>
38 + <div class="from-them">
39 + <p>안녕하세요!!<br>
40 + 저는 이모지 인간이라고 해요 @.@ <br>
41 + 당신을 만나게 되어서 매우 반가워요 :)
42 + </p>
43 + </div>
44 + <div class="clear"></div>
45 +
46 + <div class="from-me slam">
47 + <p>말풍선을 눌러 이모지 인간에게 인사하기</p>
48 + </div>
49 + <div class="clear"></div>
50 + </section>
51 + <!-- 1번 대화 -->
52 + </section>
53 +
54 +
55 + <section id="section03" class="demo">
56 + <!-- 2번 대화 -->
57 + <section>
58 + <div class="from-me gentle">
59 + <p>이모지 인간은 뭔가요...?</p>
60 + </div>
61 + <div class="clear"></div>
62 +
63 + <div class="from-them">
64 + <p>이모지 인간은 말그대로
65 + “이모지”로 이루어진 인격체입니다.
66 + 여러분이 알고 계시는 다양한 이모지들이 있죠?
67 + 저는 그 어떤 모습의 이모지든 다 될 수 있어요.
68 + 이모지 자체가 저의 몸이라고 생각하시면 됩니다.
69 + 예를 들어, 옆의 태양이나 파라솔까지도요!
70 + (하지만, 저는 인격체이기 때문에 말도 할 수 있어요V) </p>
71 + </div>
72 + </section>
73 + <!-- 2번 대화 -->
74 + </section>
75 +
76 + <section id="section04" class="demo">
77 + <!-- 3번 대화 -->
78 + <section>
79 + <div class="from-me gentle">
80 + <p>어...이모지 인간은 어떻게 생겨났나요?</p>
81 + </div>
82 + <div class="clear"></div>
83 +
84 + <div class="from-them">
85 + <p>요즘 10대-20대들은 SNS 사용시,
86 + 주로 이모지를 사용하여 대화를 하곤 합니다.
87 + 문자로 길게 설명을 하는 것보다 표정이나 감정들을
88 + 직관적으로 전달할 수 있는 이모지가
89 + 더 간편하기에 그렇습니다.
90 + 이에 현대인들의 일상은 이모지로 가득 찬,
91 + “<이모지 인간>이 아닐까”
92 + 하는 발상에서 제가 생겨나게 되었답니다.</p>
93 + </div>
94 + </section>
95 + <!-- 3번 대화 -->
96 + </section>
97 +
98 + <section id="section05" class="demo">
99 + <!-- 4번 대화 -->
100 + <section>
101 + <div class="from-me gentle">
102 + <p>그럼 이모지 인간은 뭘할 수 있나요?</p>
103 + </div>
104 + <div class="clear"></div>
105 +
106 + <div class="from-them">
107 + <p>첫째, 저와의 간단한 대화!
108 + 둘째, 이모지로 보내는 문자!
109 + 셋째, 이모지 MBTI 카드!</p>
110 + </div>
111 + <br>
112 + <br>
113 + <br>
114 + <br>
115 + <br>
116 + <br>
117 + <br>
118 + <br>
119 + <br>
120 + <br>
121 + <br>
122 + <br>
123 + <div class="from-them">
124 + <p>첫번째...보다는
125 + 두번째와 세번째에 대한 설명을 더 해볼께요...
126 + 이모지로 보내는 문자는 Emo-ssage라고 해요.
127 + 아무에게나, 혹은 특정 상대에게 자유롭게 문자를 보내면,
128 + 대화 중 일부를 이모지로 채워줄 거랍니다.
129 + 작성이 완료되면 여러분만의 emo-ssage를
130 + 이미지로 저장할 수 있어요!</p>
131 + </div>
132 + <br>
133 + <br>
134 + <br>
135 + <br>
136 + <br>
137 + <br>
138 + <br>
139 + <br>
140 + <br>
141 + <br>
142 + <br>
143 + <br>
144 + <br>
145 + <br>
146 + <br>
147 + <br>
148 + <br>
149 + <br>
150 + <br>
151 + <br>
152 + <br>
153 + <br>
154 + <br>
155 + <br>
156 + <div class="from-them">
157 + <p>이모지 MBTI 카드는 EMOTI라고 해요.
158 + 여러 이모지들을 활용해서 각 16개 mbti
159 + 고유의 이모지들을 탄생시켰어요.
160 + 아, 그리고 각 mbti 카드를 넘길 때마다
161 + 어울리는 노래도 흘러나온답니다! </p>
162 + </div>
163 + </section>
164 + <!-- 4번 대화 -->
165 + </section>
166 +
167 + <section id="section06" class="demo">
168 + <!-- 5번 대화 -->
169 + <section>
170 + <div class="from-me gentle">
171 + <p>네...아, 아까 정의가 조금 헷갈리는데, 이모지 인간은 이모지인가요 인간인가요?</p>
172 + </div>
173 + <div class="clear"></div>
174 +
175 + <div class="from-them">
176 + <p>This page cannot be found</p>
177 + </div>
178 + </section>
179 + <!-- 5번 대화 -->
180 + </section>
181 +
182 + <!-- partial -->
183 + <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
184 +<!-- 배경 스크롤 -->
185 +
186 + <!-- 메세지 버블 -->
187 + <script src="./script.js"></script>
188 +
189 +</body>
190 +</html>
1 +$(function() {
2 + $('a[href*=#]').on('click', function(e) {
3 + e.preventDefault();
4 + $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
5 + });
6 +});
...\ No newline at end of file ...\ No newline at end of file
1 +/* 배경 스크롤 */
2 +@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
3 +* {
4 + margin: 0;
5 + padding: 0;
6 +}
7 +html, body {
8 + height: 100%;
9 +}
10 +section {
11 + position: relative;
12 + width: 100%;
13 + height: 100%;
14 +}
15 +section::after {
16 + position: absolute;
17 + bottom: 0;
18 + left: 0;
19 + content: '';
20 + width: 100%;
21 + height: 80%;
22 + /* background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%); */
23 + /* background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%); */
24 +}
25 +
26 +/* 글자 */
27 +section h1 {
28 + position: absolute;
29 + top: 38%;
30 + left: 50%;
31 + z-index: 2;
32 + -webkit-transform: translate(-50%, -50%);
33 + transform: translate(-50%, -50%);
34 + color: #fff;
35 + font : normal 300 64px/1 'Josefin Sans', sans-serif;
36 + text-align: center;
37 + white-space: nowrap;
38 +}
39 +section h2 {
40 + position: absolute;
41 + top: 48%;
42 + left: 50%;
43 + z-index: 2;
44 + -webkit-transform: translate(-50%, -50%);
45 + transform: translate(-50%, -50%);
46 + color: #fff;
47 + font : normal 300 23px/1 'Josefin Sans', sans-serif;
48 + text-align: center;
49 + white-space: nowrap;
50 +}
51 +section h3 {
52 + position: absolute;
53 + top: 54%;
54 + left: 50%;
55 + z-index: 2;
56 + -webkit-transform: translate(-50%, -50%);
57 + transform: translate(-50%, -50%);
58 + color: #fff;
59 + font : normal 300 13px/1 'Josefin Sans', sans-serif;
60 + text-align: center;
61 + white-space: nowrap;
62 + line-height: 16px;
63 +}
64 +
65 +#section01 { background: url(https://picsum.photos/1200/800?image=575) center center / cover no-repeat;}
66 +#section02 { background: url(https://picsum.photos/1200/800?image=1016) center center / cover no-repeat;}
67 +#section03 { background: url(https://picsum.photos/1200/800?image=869) center center / cover no-repeat;}
68 +#section04 { background: url(https://picsum.photos/1200/800?image=506) center center / cover no-repeat;}
69 +#section05 { background: url(https://picsum.photos/1200/800?image=1037) center center / cover no-repeat;}
70 +#section06 { background: url(https://picsum.photos/1200/800?image=901) center center / cover no-repeat;}
71 +
72 +
73 +/* 스크롤 글자 */
74 +.demo a {
75 + position: absolute;
76 + bottom: 20px;
77 + left: 50%;
78 + z-index: 2;
79 + display: inline-block;
80 + -webkit-transform: translate(0, -50%);
81 + transform: translate(0, -50%);
82 + color: rgb(255, 255, 255);
83 + font : normal 400 15px/1 'Josefin Sans', sans-serif;
84 + letter-spacing: .1em;
85 + text-decoration: none;
86 + transition: opacity .3s;
87 +}
88 +.demo a:hover {
89 + opacity: .5;
90 +}
91 +
92 +
93 +
94 +#section01 a {
95 + padding-top: 40px;
96 +}
97 +#section01 a span {
98 + position: absolute;
99 + top: 0;
100 + /* left: 50%; */
101 + width: 24px;
102 + height: 24px;
103 + /* margin-left: -12px; */
104 + border-left: 1px solid #fff;
105 + border-bottom: 1px solid #fff;
106 + -webkit-transform: rotate(-45deg);
107 + transform: rotate(-45deg);
108 + box-sizing: border-box;
109 +}
110 +
111 +
112 +/*
113 +#section02 a {
114 + padding-top: 60px;
115 +}
116 +#section02 a span {
117 + position: absolute;
118 + top: 0;
119 + left: 50%;
120 + width: 46px;
121 + height: 46px;
122 + margin-left: -23px;
123 + border: 1px solid #fff;
124 + border-radius: 100%;
125 + box-sizing: border-box;
126 +}
127 +#section02 a span::after {
128 + position: absolute;
129 + top: 50%;
130 + left: 50%;
131 + content: '';
132 + width: 16px;
133 + height: 16px;
134 + margin: -12px 0 0 -8px;
135 + border-left: 1px solid #fff;
136 + border-bottom: 1px solid #fff;
137 + -webkit-transform: rotate(-45deg);
138 + transform: rotate(-45deg);
139 + box-sizing: border-box;
140 +}
141 +
142 +
143 +
144 +#section03 a {
145 + padding-top: 60px;
146 +}
147 +#section03 a span {
148 + position: absolute;
149 + top: 0;
150 + left: 50%;
151 + width: 46px;
152 + height: 46px;
153 + margin-left: -23px;
154 + border: 1px solid #fff;
155 + border-radius: 100%;
156 + box-sizing: border-box;
157 +}
158 +#section03 a span::after {
159 + position: absolute;
160 + top: 50%;
161 + left: 50%;
162 + content: '';
163 + width: 16px;
164 + height: 16px;
165 + margin: -12px 0 0 -8px;
166 + border-left: 1px solid #fff;
167 + border-bottom: 1px solid #fff;
168 + -webkit-transform: rotate(-45deg);
169 + transform: rotate(-45deg);
170 + box-sizing: border-box;
171 +}
172 +#section03 a span::before {
173 + position: absolute;
174 + top: 0;
175 + left: 0;
176 + z-index: -1;
177 + content: '';
178 + width: 44px;
179 + height: 44px;
180 + box-shadow: 0 0 0 0 rgba(255,255,255,.1);
181 + border-radius: 100%;
182 + opacity: 0;
183 + -webkit-animation: sdb03 3s infinite;
184 + animation: sdb03 3s infinite;
185 + box-sizing: border-box;
186 +}
187 +@-webkit-keyframes sdb03 {
188 + 0% {
189 + opacity: 0;
190 + }
191 + 30% {
192 + opacity: 1;
193 + }
194 + 60% {
195 + box-shadow: 0 0 0 60px rgba(255,255,255,.1);
196 + opacity: 0;
197 + }
198 + 100% {
199 + opacity: 0;
200 + }
201 +}
202 +@keyframes sdb03 {
203 + 0% {
204 + opacity: 0;
205 + }
206 + 30% {
207 + opacity: 1;
208 + }
209 + 60% {
210 + box-shadow: 0 0 0 60px rgba(255,255,255,.1);
211 + opacity: 0;
212 + }
213 + 100% {
214 + opacity: 0;
215 + }
216 +}
217 +
218 +
219 +
220 +#section04 a {
221 + padding-top: 60px;
222 +}
223 +#section04 a span {
224 + position: absolute;
225 + top: 0;
226 + left: 50%;
227 + width: 24px;
228 + height: 24px;
229 + margin-left: -12px;
230 + border-left: 1px solid #fff;
231 + border-bottom: 1px solid #fff;
232 + -webkit-transform: rotate(-45deg);
233 + transform: rotate(-45deg);
234 + -webkit-animation: sdb04 2s infinite;
235 + animation: sdb04 2s infinite;
236 + box-sizing: border-box;
237 +}
238 +@-webkit-keyframes sdb04 {
239 + 0% {
240 + -webkit-transform: rotate(-45deg) translate(0, 0);
241 + }
242 + 20% {
243 + -webkit-transform: rotate(-45deg) translate(-10px, 10px);
244 + }
245 + 40% {
246 + -webkit-transform: rotate(-45deg) translate(0, 0);
247 + }
248 +}
249 +@keyframes sdb04 {
250 + 0% {
251 + transform: rotate(-45deg) translate(0, 0);
252 + }
253 + 20% {
254 + transform: rotate(-45deg) translate(-10px, 10px);
255 + }
256 + 40% {
257 + transform: rotate(-45deg) translate(0, 0);
258 + }
259 +}
260 +
261 +
262 +
263 +#section05 a {
264 + padding-top: 70px;
265 +}
266 +#section05 a span {
267 + position: absolute;
268 + top: 0;
269 + left: 50%;
270 + width: 24px;
271 + height: 24px;
272 + margin-left: -12px;
273 + border-left: 1px solid #fff;
274 + border-bottom: 1px solid #fff;
275 + -webkit-transform: rotate(-45deg);
276 + transform: rotate(-45deg);
277 + -webkit-animation: sdb05 1.5s infinite;
278 + animation: sdb05 1.5s infinite;
279 + box-sizing: border-box;
280 +}
281 +@-webkit-keyframes sdb05 {
282 + 0% {
283 + -webkit-transform: rotate(-45deg) translate(0, 0);
284 + opacity: 0;
285 + }
286 + 50% {
287 + opacity: 1;
288 + }
289 + 100% {
290 + -webkit-transform: rotate(-45deg) translate(-20px, 20px);
291 + opacity: 0;
292 + }
293 +}
294 +@keyframes sdb05 {
295 + 0% {
296 + transform: rotate(-45deg) translate(0, 0);
297 + opacity: 0;
298 + }
299 + 50% {
300 + opacity: 1;
301 + }
302 + 100% {
303 + transform: rotate(-45deg) translate(-20px, 20px);
304 + opacity: 0;
305 + }
306 +}
307 +
308 +
309 +
310 +#section06 a {
311 + padding-top: 70px;
312 +}
313 +#section06 a span {
314 + position: absolute;
315 + top: 0;
316 + left: 50%;
317 + width: 24px;
318 + height: 24px;
319 + margin-left: -12px;
320 + border-left: 1px solid #fff;
321 + border-bottom: 1px solid #fff;
322 + -webkit-transform: rotateZ(-45deg);
323 + transform: rotateZ(-45deg);
324 + -webkit-animation: sdb06 1.5s infinite;
325 + animation: sdb06 1.5s infinite;
326 + box-sizing: border-box;
327 +}
328 +@-webkit-keyframes sdb06 {
329 + 0% {
330 + -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
331 + opacity: 0;
332 + }
333 + 50% {
334 + opacity: 1;
335 + }
336 + 100% {
337 + -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
338 + opacity: 0;
339 + }
340 +}
341 +@keyframes sdb06 {
342 + 0% {
343 + transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
344 + opacity: 0;
345 + }
346 + 50% {
347 + opacity: 1;
348 + }
349 + 100% {
350 + transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
351 + opacity: 0;
352 + }
353 +}
354 +
355 +
356 +
357 +#section07 a {
358 + padding-top: 80px;
359 +}
360 +#section07 a span {
361 + position: absolute;
362 + top: 0;
363 + left: 50%;
364 + width: 24px;
365 + height: 24px;
366 + margin-left: -12px;
367 + border-left: 1px solid #fff;
368 + border-bottom: 1px solid #fff;
369 + -webkit-transform: rotate(-45deg);
370 + transform: rotate(-45deg);
371 + -webkit-animation: sdb07 2s infinite;
372 + animation: sdb07 2s infinite;
373 + opacity: 0;
374 + box-sizing: border-box;
375 +}
376 +#section07 a span:nth-of-type(1) {
377 + -webkit-animation-delay: 0s;
378 + animation-delay: 0s;
379 +}
380 +#section07 a span:nth-of-type(2) {
381 + top: 16px;
382 + -webkit-animation-delay: .15s;
383 + animation-delay: .15s;
384 +}
385 +#section07 a span:nth-of-type(3) {
386 + top: 32px;
387 + -webkit-animation-delay: .3s;
388 + animation-delay: .3s;
389 +}
390 +@-webkit-keyframes sdb07 {
391 + 0% {
392 + opacity: 0;
393 + }
394 + 50% {
395 + opacity: 1;
396 + }
397 + 100% {
398 + opacity: 0;
399 + }
400 +}
401 +@keyframes sdb07 {
402 + 0% {
403 + opacity: 0;
404 + }
405 + 50% {
406 + opacity: 1;
407 + }
408 + 100% {
409 + opacity: 0;
410 + }
411 +}
412 +
413 +
414 +
415 +#section08 a {
416 + padding-top: 60px;
417 +}
418 +#section08 a span {
419 + position: absolute;
420 + top: 0;
421 + left: 50%;
422 + width: 30px;
423 + height: 50px;
424 + margin-left: -15px;
425 + border: 2px solid #fff;
426 + border-radius: 50px;
427 + box-sizing: border-box;
428 +}
429 +#section08 a span::before {
430 + position: absolute;
431 + top: 10px;
432 + left: 50%;
433 + content: '';
434 + width: 6px;
435 + height: 6px;
436 + margin-left: -3px;
437 + background-color: #fff;
438 + border-radius: 100%;
439 + box-sizing: border-box;
440 +}
441 +
442 +
443 +
444 +#section09 a {
445 + padding-top: 80px;
446 +}
447 +#section09 a span {
448 + position: absolute;
449 + top: 0;
450 + left: 50%;
451 + width: 30px;
452 + height: 50px;
453 + margin-left: -15px;
454 + border: 2px solid #fff;
455 + border-radius: 50px;
456 + box-sizing: border-box;
457 +}
458 +#section09 a span::before {
459 + position: absolute;
460 + top: 10px;
461 + left: 50%;
462 + content: '';
463 + width: 6px;
464 + height: 6px;
465 + margin-left: -3px;
466 + background-color: #fff;
467 + border-radius: 100%;
468 + box-sizing: border-box;
469 +}
470 +#section09 a span::after {
471 + position: absolute;
472 + bottom: -18px;
473 + left: 50%;
474 + width: 18px;
475 + height: 18px;
476 + content: '';
477 + margin-left: -9px;
478 + border-left: 1px solid #fff;
479 + border-bottom: 1px solid #fff;
480 + -webkit-transform: rotate(-45deg);
481 + transform: rotate(-45deg);
482 + box-sizing: border-box;
483 +}
484 +
485 +
486 +
487 +#section10 a {
488 + padding-top: 60px;
489 +}
490 +#section10 a span {
491 + position: absolute;
492 + top: 0;
493 + left: 50%;
494 + width: 30px;
495 + height: 50px;
496 + margin-left: -15px;
497 + border: 2px solid #fff;
498 + border-radius: 50px;
499 + box-sizing: border-box;
500 +}
501 +#section10 a span::before {
502 + position: absolute;
503 + top: 10px;
504 + left: 50%;
505 + content: '';
506 + width: 6px;
507 + height: 6px;
508 + margin-left: -3px;
509 + background-color: #fff;
510 + border-radius: 100%;
511 + -webkit-animation: sdb10 2s infinite;
512 + animation: sdb10 2s infinite;
513 + box-sizing: border-box;
514 +}
515 +@-webkit-keyframes sdb10 {
516 + 0% {
517 + -webkit-transform: translate(0, 0);
518 + opacity: 0;
519 + }
520 + 40% {
521 + opacity: 1;
522 + }
523 + 80% {
524 + -webkit-transform: translate(0, 20px);
525 + opacity: 0;
526 + }
527 + 100% {
528 + opacity: 0;
529 + }
530 +}
531 +@keyframes sdb10 {
532 + 0% {
533 + transform: translate(0, 0);
534 + opacity: 0;
535 + }
536 + 40% {
537 + opacity: 1;
538 + }
539 + 80% {
540 + transform: translate(0, 20px);
541 + opacity: 0;
542 + }
543 + 100% {
544 + opacity: 0;
545 + }
546 +} */
547 +/* 배경스크롤 */
548 +
549 +
550 +
551 +
552 +
553 +
554 +
555 +/* 메세지 버블 */
556 +/* body {
557 + font-family: "Helvetica Neue";
558 + font-size: 20px;
559 + font-weight: normal;
560 +} */
561 +/*
562 +section {
563 + max-width: 450px;
564 + margin: 50px auto;
565 +} */
566 +section div {
567 + max-width: 255px;
568 + word-wrap: break-word;
569 + margin-bottom: 20px;
570 + line-height: 24px;
571 +}
572 +
573 +.clear {
574 + clear: both;
575 +}
576 +
577 +.from-me {
578 + position: relative;
579 + padding: 10px 20px;
580 + color: white;
581 + background: #0B93F6;
582 + border-radius: 25px;
583 + float: right;
584 + right: 400px;
585 +}
586 +.from-me:before {
587 + content: "";
588 + position: absolute;
589 + z-index: -1;
590 + bottom: -2px;
591 + right: -7px;
592 + height: 20px;
593 + border-right: 20px solid #0B93F6;
594 + border-bottom-left-radius: 16px 14px;
595 + -webkit-transform: translate(0, -2px);
596 +}
597 +.from-me:after {
598 + content: "";
599 + position: absolute;
600 + z-index: 1;
601 + bottom: -2px;
602 + right: -56px;
603 + width: 26px;
604 + height: 20px;
605 + background: white;
606 + border-bottom-left-radius: 10px;
607 + -webkit-transform: translate(-30px, -2px);
608 +}
609 +
610 +.from-them {
611 + position: relative;
612 + padding: 10px 20px;
613 + background: #E5E5EA;
614 + border-radius: 25px;
615 + color: black;
616 + float: left;
617 + left: 400px;
618 +}
619 +.from-them:before {
620 + content: "";
621 + position: absolute;
622 + z-index: 2;
623 + bottom: -2px;
624 + left: -7px;
625 + height: 20px;
626 + border-left: 20px solid #E5E5EA;
627 + border-bottom-right-radius: 16px 14px;
628 + -webkit-transform: translate(0, -2px);
629 +}
630 +.from-them:after {
631 + content: "";
632 + position: absolute;
633 + z-index: 3;
634 + bottom: -2px;
635 + left: 4px;
636 + width: 26px;
637 + height: 20px;
638 + background: white;
639 + border-bottom-right-radius: 10px;
640 + -webkit-transform: translate(-30px, -2px);
641 +}
642 +/* 메세지 버블 */
643 +
644 +
645 +
646 +
647 +/* text fade in */
648 +@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
649 +
650 +.animated{
651 + -webkit-animation-fill-mode:both;
652 + -webkit-animation-duration:2s;
653 + animation-duration:2s;
654 +}
655 +.animated2{
656 + animation-delay:.5s;
657 + -webkit-animation-delay:.5s;
658 + -webkit-animation-fill-mode:both;
659 + -webkit-animation-duration:2s;
660 + animation-duration:2s;
661 +}
662 +@-webkit-keyframes fadeOutUp {
663 + 0% {
664 + opacity: 0;
665 + -webkit-transform: translateY(1);
666 + -webkit-transform: translateY(40px);
667 + } 100% {
668 + opacity: 1;
669 + }
670 +}
671 +
672 +.fadeOutUp {
673 + -webkit-animation-name: fadeOutUp;
674 + animation-name: fadeOutUp;
675 +}
676 +
677 +.fadeIn {
678 + -webkit-animation-name: fadeIn;
679 + animation-name: fadeIn;
680 +}
681 +
682 +@-webkit-keyframes fadeIn {
683 + 0%{
684 + opacity: 0;
685 + -webkit-transform: translateY(1);
686 + -webkit-transform: translateY(40px);
687 + }
688 + 100% {
689 + opacity: 1;
690 + }
691 +}
692 +/* text fade in */
693 +
694 +
...@@ -117,7 +117,7 @@ body { ...@@ -117,7 +117,7 @@ body {
117 } 117 }
118 @media (min-width: 800px) { 118 @media (min-width: 800px) {
119 .page-content { 119 .page-content {
120 - grid-template-columns: repeat(4, 1fr); 120 + grid-template-columns: repeat(3, 1fr);
121 } 121 }
122 } 122 }
123 123
...@@ -329,6 +329,7 @@ body { ...@@ -329,6 +329,7 @@ body {
329 font-family: Noto Sans KR; 329 font-family: Noto Sans KR;
330 text-align: center; 330 text-align: center;
331 } 331 }
332 +
332 /* 텍스트 */ 333 /* 텍스트 */
333 334
334 335
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 <link rel="stylesheet" href="/About Us/About Us.css"> 7 <link rel="stylesheet" href="/About Us/About Us.css">
8 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
10 - 10 +
11 <!-- 손흔들 --> 11 <!-- 손흔들 -->
12 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 12 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
13 13
...@@ -20,152 +20,165 @@ ...@@ -20,152 +20,165 @@
20 <!-- 내비게이션 --> 20 <!-- 내비게이션 -->
21 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap--> 21 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
22 <!--css link--> 22 <!--css link-->
23 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons--> 23 + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
24 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script--> 24 + <!--for icons-->
25 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
25 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script--> 26 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
26 27
27 <body id="page-top"> 28 <body id="page-top">
28 - <!--creating a navigation bar--> 29 + <!--creating a navigation bar-->
29 - <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--> 30 + <nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom">
30 - <div class="container"><!--gives padding of 16px on LHS and RHS--> 31 + <!--navigation bar with default view fixed on top specific class nav-bar custom-->
31 - <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll --> 32 + <div class="container"><!--gives padding of 16px on LHS and RHS-->
32 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 33 + <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
34 + <button type="button" class="navbar-toggle" data-toggle="collapse"
35 + data-target="#bs-example-navbar-collapse-1">
33 <span></span> Menu <i class="fa fa-bars"></i> 36 <span></span> Menu <i class="fa fa-bars"></i>
34 </button> 37 </button>
35 </div><!--end of button--> 38 </div><!--end of button-->
36 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse--> 39 + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
37 - <ul class="nav navbar-nav"> 40 + <ul class="nav navbar-nav">
38 - <li><a href="/index.html">Home</a></li> 41 + <li><a href="/index.html">Home</a></li>
39 - </ul> 42 + </ul>
40 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page--> 43 + <ul class="nav navbar-nav navbar-right page-scroll">
41 - <li> <a href="/About Us/About Us.html">About Us</a></li> 44 + <!--second UL to go to right having proprty to scroll page-->
42 - <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li> 45 + <li> <a href="/About Us/About Us.html">About Us</a></li>
43 - <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li> 46 + <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
44 - <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li> 47 + <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
45 - </ul> 48 + <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
46 - </div> 49 + </ul>
47 - </div> 50 + </div>
48 - </nav>
49 - <!-- 내비게이션 -->
50 -
51 - <!-- 1페이지 -->
52 - <div id="container">
53 - <div class="list">
54 - <div class="one">
55 -
56 - <div class="wave"><span>👋</span></div>
57 -
58 - <p id="p1" class="animated fadeOutUp">Hello, Humans!</p>
59 - <br>
60 - <p id="p2" class="animated fadeOutUp">안녕하세요, 우리는 팀 이모지 인간입니다.</p>
61 -
62 - <br>
63 - <br>
64 - <br>
65 - <p id="p3" class="animated2 fadeIn">우리는 이모지 인간이 아닙니다.</p>
66 - <p id="p4" class="animated2 fadeIn">진짜 인간이에요!</p>
67 -
68 </div> 51 </div>
69 - </div> 52 + </nav>
70 - <!-- 1페이지 --> 53 + <!-- 내비게이션 -->
71 - 54 +
72 - <!-- 2페이지 --> 55 + <!-- 1페이지 -->
73 - <div class="list"> 56 + <div id="container">
74 - <div class="two"> 57 + <div class="list">
75 - 58 + <div class="one">
76 - <div style="float: left; width: 40%;"> 59 +
77 - <img src="/src/song.png" style="display: block; margin: 0 auto;"> 60 + <div class="wave"><span>👋</span></div>
61 + <br>
62 + <br>
63 + <br>
64 + <br>
65 + <br>
66 + <br>
67 + <br>
68 + <br>
69 + <br>
70 +
71 + <p id="p1" class="animated fadeOutUp">Hello, Humans!</p>
72 + <br>
73 + <p id="p2" class="animated fadeOutUp">안녕하세요, 우리는 팀 이모지 인간입니다.</p>
74 +
75 + <br>
76 + <br>
77 + <br>
78 + <p id="p3" class="animated2 fadeIn">우리는 이모지 인간이 아닙니다.</p>
79 + <p id="p4" class="animated2 fadeIn">진짜 인간이에요!</p>
80 +
81 + </div>
78 </div> 82 </div>
83 + <!-- 1페이지 -->
79 84
80 - <!-- 요소들 --> 85 + <!-- 2페이지 -->
81 - <div style="float: left; width: 60%;"> 86 + <div class="list">
82 - <main class="page-content"> 87 + <div class="two">
83 - <!-- 1번칸 --> 88 +
84 - <div class="card"> 89 + <div style="float: left; width: 40%;">
85 - <div class="content"> 90 + <img src="/src/song.png" style="display: block; margin: 0 auto;">
86 - <h2 class="title">Me</h2>
87 - <p class="copy">안녕하세요 인간 흠터레스팅 송민겸입니다.
88 - 저는 경희대학교 디지털콘텐츠학과 휴학 중인 (현)백수입니다.
89 - 23년 새해를 맞아 갓-생을 살기 위해 노력하고 있지만...
90 - 네, 아무튼 열심히 노력해보았습니다. ^^
91 - </p>
92 - </div>
93 - </div>
94 - <!-- 2번칸 -->
95 - <div class="card">
96 -
97 - <div class="content">
98 - <h2 class="title">Interest</h2>
99 - <p class="copy">휴학을 한 후의 제 관심사는 해외 여행과 진로임니두.
100 - 놀 수 있을 때 많이 놀러다니고 싶어 티끌 모아 여행으로 탕진을 실천하고 있슴니다.
101 - 또 최근에는 UX/UI 디자인과 개발에 관심이 있어 이런 웹페이지도 만들었어욤!
102 - 나 이러다가 개발자가 되는 거 아닌가 몰루 '3'
103 - </p>
104 - </div>
105 -
106 </div> 91 </div>
107 - <!-- 3번칸 --> 92 +
108 - <div class="card"> 93 + <!-- 요소들 -->
109 - <div class="content"> 94 + <div style="float: left; width: 60%;">
110 - <h2 class="title">Summary</h2> 95 + <main class="page-content">
111 - <p class="copy">이번 전시 후기는...정말 발등에 불이 아니라 메테오가 떨어진 수준 ^^;; 96 + <!-- 1번칸 -->
112 - 비전공자로 코딩의 ㅋ도 모르는 제가 정말 맨땅에 헤딩 수준으로 개발을 하게 되어서 더 고생했던 것 같습니다. 97 + <div class="card">
113 - 근데 솔직히 벼락치기로 이정도면 잘했어요 칭찬 스티커 받아야 한다고 생각함ㄹㅇㅋㅋ. 98 + <div class="content">
114 - 반박시 내 마음 찢어짐 ㅠ 99 + <h2 class="title">Me</h2>
115 - 100 + <p class="copy">안녕하세요 인간 흠터레스팅 송민겸입니다.
116 - </p> 101 + 저는 경희대학교 디지털콘텐츠학과 휴학 중인 (현)백수입니다.
117 - </div> 102 + 23년 새해를 맞아 갓-생을 살기 위해 노력하고 있지만...
103 + 네, 아무튼 열심히 노력해보았습니다. ^^
104 + </p>
105 + </div>
106 + </div>
107 + <!-- 2번칸 -->
108 + <div class="card">
109 +
110 + <div class="content">
111 + <h2 class="title">Interest</h2>
112 + <p class="copy">휴학을 한 후의 제 관심사는 해외 여행과 진로임니두.
113 + 놀 수 있을 때 많이 놀러다니고 싶어 티끌 모아 여행으로 탕진을 실천하고 있슴니다.
114 + 또 최근에는 UX/UI 디자인과 개발에 관심이 있어 이런 웹페이지도 만들었어욤!
115 + 나 이러다가 개발자가 되는 거 아닌가 몰루 '3'
116 + </p>
117 + </div>
118 +
119 + </div>
120 + <!-- 3번칸 -->
121 + <div class="card">
122 + <div class="content">
123 + <h2 class="title">Summary</h2>
124 + <p class="copy">이번 전시 후기는...정말 발등에 불이 아니라 메테오가 떨어진 수준 ^^;;
125 + 비전공자로 코딩의 ㅋ도 모르는 제가 정말 맨땅에 헤딩 수준으로 개발을 하게 되어서 더 고생했던 것 같습니다.
126 + 근데 솔직히 벼락치기로 이정도면 잘했어요 칭찬 스티커 받아야 한다고 생각함ㄹㅇㅋㅋ.
127 + 반박시 내 마음 찢어짐 ㅠ
128 +
129 + </p>
130 + </div>
131 + </div>
132 + </main>
118 </div> 133 </div>
119 - </main> 134 + <!-- 요소들 -->
135 +
136 + </div>
120 </div> 137 </div>
121 - <!-- 요소들 --> 138 + <!-- 2페이지 -->
122 - 139 +
123 - </div> 140 + <!-- 3페이지 -->
124 - </div> 141 + <div class="list">
125 - <!-- 2페이지 --> 142 + <div class="three">
126 - 143 +
127 - <!-- 3페이지 --> 144 + <!-- 요소들 -->
128 - <div class="list"> 145 + <div style="float: left; width: 64%;">
129 - <div class="three"> 146 + <main class="page-content" style="justify-content: end;">
130 - 147 + <!-- 1번칸 -->
131 - <!-- 요소들 --> 148 + <div class="card">
132 - <div style="float: left; width: 64%;"> 149 + <div class="content">
133 - <main class="page-content"> 150 + <h2 class="title">Me</h2>
134 - <!-- 1번칸 --> 151 + <p class="copy">안녕하세요,
135 - <div class="card"> 152 + 한국 살고 있는
136 - <div class="content"> 153 + 김유진이라고 합니다.
137 - <h2 class="title">Me</h2> 154 + 디지털 콘텐츠에 대해
138 - <p class="copy">안녕하세요, 155 + 공부하면서 다양한
139 - 한국 살고 있는 156 + 작업들을 시도중입니다.
140 - 김유진이라고 합니다. 157 + 제 개인 작업물이
141 - 디지털 콘텐츠에 대해 158 + 보고 싶으시다면,
142 - 공부하면서 다양한 159 + 옆 계정에 놀러와주세요! </p>
143 - 작업들을 시도중입니다. 160 + </div>
144 - 제 개인 작업물이 161 + </div>
145 - 보고 싶으시다면, 162 + <!-- 2번칸 -->
146 - 옆 계정에 놀러와주세요! </p> 163 + <div class="card">
147 - </div> 164 + <div class="content">
148 - </div> 165 + <h2 class="title">Interest</h2>
149 - <!-- 2번칸 --> 166 + <p class="copy">현재 관심 분야는
150 - <div class="card"> 167 + 3D,
151 - <<div class="content"> 168 + 특수효과,
152 - <h2 class="title">Interest</h2> 169 + UI&UX,
153 - <p class="copy">현재 관심 분야는 170 + 콘텐츠 기획
154 - 3D, 171 + 등 다양합니다.
155 - 특수효과, 172 + 궁금한 분야들이 많아서
156 - UI&UX, 173 + 이들을 각각
157 - 콘텐츠 기획 174 + 경험하고 공부해보는
158 - 등 다양합니다. 175 + 과정에 있습니다.
159 - 궁금한 분야들이 많아서 176 + (미래에 무슨 일을
160 - 이들을 각각 177 + 하고 있을지 궁금하네요...)
161 - 경험하고 공부해보는 178 + </p>
162 - 과정에 있습니다. 179 + </div>
163 - (미래에 무슨 일을 180 + </div>
164 - 하고 있을지 궁금하네요...) 181 + <!-- 3번칸 -->
165 - </p>
166 - </div>
167 - </div>
168 - <!-- 3번칸 -->
169 <div class="card"> 182 <div class="card">
170 <div class="content"> 183 <div class="content">
171 <h2 class="title">Summary</h2> 184 <h2 class="title">Summary</h2>
...@@ -173,30 +186,29 @@ ...@@ -173,30 +186,29 @@
173 이모지 인간 프로젝트는 186 이모지 인간 프로젝트는
174 제게 큰 도움이 된 187 제게 큰 도움이 된
175 작업이었습니다. 188 작업이었습니다.
176 - 189 +
177 색다른 시도와 고민도 많이 했고, 190 색다른 시도와 고민도 많이 했고,
178 - 그 과정에서 새롭게 배우게 된 191 + 그 과정에서 새롭게 배우게 된
179 부분들도 많았습니다. 192 부분들도 많았습니다.
180 (ex : 개발...) 193 (ex : 개발...)
181 - 194 +
182 이렇게 탄생한 195 이렇게 탄생한
183 - >>>이모지 인간<<< 196 + >>>이모지 인간<<< 재밌게 즐겨주시길 바라요! </p>
184 - 재밌게 즐겨주시길 197 + </div>
185 - 바라요! 198 + </div>
186 - 199 + </main>
187 - </p> 200 + </div>
201 +
202 + <!-- 요소들 -->
203 +
204 + <div style="float: left; width: 36%;">
205 + <img src="/src/kim.png" style="display: block; margin: 0 auto;">
188 </div> 206 </div>
189 - </main>
190 - </div>
191 - <!-- 요소들 -->
192 207
193 - <div style="float: left; width: 36%;"> 208 + </div>
194 - <img src="/src/kim.png" style="display: block; margin: 0 auto;">
195 </div> 209 </div>
210 + <!-- 3페이지 -->
196 211
197 - </div> 212 + </body>
198 - </div>
199 - <!-- 3페이지 -->
200 213
201 -</body> 214 +</html>
202 -</html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,73 +2,101 @@ ...@@ -2,73 +2,101 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 - <title>EMOJI-HUMAN</title> 5 + <meta charset="UTF-8">
6 - <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css"> 6 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 - <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png"> 7 + <meta name="viewport" content="width=device-width, initial-scale=1">
8 - <style> 8 + <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
9 - body { 9 + <title>EMOJI-HUMAN</title>
10 - background-image: url("emossage-03.png"); 10 + <link rel="stylesheet" href="/index.css">
11 - background-repeat: no-repeat; 11 + <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
12 - background-size: 100%; 12 + <style>
13 - font-family: Noto Sans KR, regular; 13 + body {
14 - text-align: center; 14 + background-image: url("emossage-03.png");
15 + background-repeat: no-repeat;
16 + background-size: 100%;
17 + font-family: Noto Sans KR, regular;
18 + text-align: center;
15 } 19 }
16 - h1 {font-size: 50px;} 20 +
17 - p1 {font-size: 24px;} 21 + h1 {
18 - p2 {font-size: 14px} 22 + font-size: 50px;
19 - p2.small {line-height: 0.7;} 23 + }
20 - </style> 24 +
21 - <div style="height: 100px; overflow: auto"> 25 + p1 {
22 - </div> 26 + font-size: 24px;
23 - 27 + }
24 - 28 +
29 + p2 {
30 + font-size: 14px
31 + }
32 +
33 + p2.small {
34 + line-height: 0.7;
35 + }
36 + </style>
37 + <div style="height: 100px; overflow: auto">
38 + </div>
39 +
40 +
25 </head> 41 </head>
26 42
27 <body> 43 <body>
28 - <form action="#"> 44 + <form action="#">
29 - 45 +
30 - <header> 46 + <header>
31 - <h1>Message + EMOJI<span>= Emossage</span></h1> 47 + <h1>Message + EMOJI<span>= Emossage</span></h1>
32 - <p1>Emoti는 이모지 중심 메세지입니다</p1> 48 + <p1>Emoti는 이모지 중심 메세지입니다</p1>
33 - <br> 49 + <br>
34 - <p2> 50 + <p2>
35 - <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br> 51 + <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
36 - 여러분만의 이모지 편지를 적어보세요<br> </p2> 52 + 여러분만의 이모지 편지를 적어보세요<br>
37 - </p> 53 + </p2>
38 - </header> 54 + </p>
39 - 55 + </header>
40 - <div> 56 +
41 - <label class="desc" id="title1" for="Field1">Full Name</label> 57 + <div>
42 - <div> 58 + <label class="desc" id="title1" for="Field1">Full Name</label>
43 - <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1"> 59 + <div>
44 - </div> 60 + <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
45 - </div> 61 + </div>
46 - 62 + </div>
47 - <div> 63 +
48 - <label class="desc" id="title3" for="Field3"> 64 + <div>
49 - Email 65 + <label class="desc" id="title3" for="Field3">
50 - </label> 66 + Email
51 - <div> 67 + </label>
52 - <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3"> 68 + <div>
53 - </div> 69 + <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
54 - </div> 70 + </div>
55 - 71 + </div>
56 - <div> 72 +
57 - <label class="desc" id="title4" for="Field4"> 73 + <div>
58 - Message 74 + <label class="desc" id="title4" for="Field4">
59 - </label> 75 + Message
60 - 76 + </label>
61 - <div> 77 +
62 - <textarea id="Field4" name="Field4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea> 78 + <div>
63 - </div> 79 + <textarea id="input" class="h-350" name="text_1" spellcheck="true" rows="10" cols="50" tabindex="4" placeholder="이모지로 변환할 문장을 입력해주세요"></textarea>
64 - 80 + </div>
65 - <div> 81 +
66 - <input id="saveForm" name="saveForm" type="submit" value="Submit"> 82 + <div>
67 - </div> 83 + <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>
68 - </div> 84 + </div>
69 - 85 + </div>
70 - </form> 86 +
71 - 87 + <div>
72 - 88 + <label class="result" id="title5" for="Field5">
73 - 89 + Emo-ssage
74 -</body> 90 + </label>
91 +
92 + <div>
93 + <div id="output" class="h=350" name="text_2" style="font-family: Arial, Helvetica, sans-serif; overflow-y: auto;max-height: 350px;"></p>
94 + </div>
95 + </div>
96 + <script src="/EMO-SSAGE/emossage.js"/>
97 +
98 + </form>
99 +
100 +
101 +
102 +</body>
...\ No newline at end of file ...\ No newline at end of file
......
This diff could not be displayed because it is too large.
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 7
8 .swiper-container { 8 .swiper-container {
9 width: 100%; 9 width: 100%;
10 - height: 70%; 10 + height: auto;
11 } 11 }
12 12
13 .swiper-slide { 13 .swiper-slide {
...@@ -427,3 +427,87 @@ body { ...@@ -427,3 +427,87 @@ body {
427 background-repeat: no-repeat; 427 background-repeat: no-repeat;
428 } 428 }
429 /* 그라디언트 배경 */ 429 /* 그라디언트 배경 */
430 +
431 +
432 +
433 +
434 +
435 +/* text fade in */
436 +@import url(https://fonts.googleapis.com/css?family=Raleway:400,900,500,600,700);
437 +
438 +.animated{
439 + -webkit-animation-fill-mode:both;
440 + -webkit-animation-duration:2s;
441 + animation-duration:2s;
442 +}
443 +.animated2{
444 + animation-delay:.5s;
445 + -webkit-animation-delay:.5s;
446 + -webkit-animation-fill-mode:both;
447 + -webkit-animation-duration:2s;
448 + animation-duration:2s;
449 +}
450 +@-webkit-keyframes fadeOutUp {
451 + 0% {
452 + opacity: 0;
453 + -webkit-transform: translateY(1);
454 + -webkit-transform: translateY(40px);
455 + } 100% {
456 + opacity: 1;
457 + }
458 +}
459 +
460 +.fadeOutUp {
461 + -webkit-animation-name: fadeOutUp;
462 + animation-name: fadeOutUp;
463 +}
464 +
465 +.fadeIn {
466 + -webkit-animation-name: fadeIn;
467 + animation-name: fadeIn;
468 +}
469 +
470 +@-webkit-keyframes fadeIn {
471 + 0%{
472 + opacity: 0;
473 + -webkit-transform: translateY(1);
474 + -webkit-transform: translateY(40px);
475 + }
476 + 100% {
477 + opacity: 1;
478 + }
479 +}
480 +/* text fade in */
481 +
482 +
483 +
484 +
485 +
486 +
487 +/* 텍스트 */
488 +#p1 {
489 + font-size: 50px;
490 + color: rgb(0, 0, 0);
491 + font-family: Noto Sans KR;
492 + text-align: center;
493 +}
494 +#p2{
495 + font-size: 20px;
496 + color: rgb(0, 0, 0);
497 + font-family: Noto Sans KR;
498 + text-align: center;
499 +}
500 +#p3{
501 + font-size: 15px;
502 + color: rgb(0, 0, 0);
503 + font-family: Noto Sans KR;
504 + text-align: center;
505 +}
506 +#p4{
507 + font-size: 15px;
508 + color: rgb(0, 0, 0);
509 + font-family: Noto Sans KR;
510 + text-align: center;
511 +}
512 +
513 +/* 텍스트 */
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -46,6 +46,7 @@ ...@@ -46,6 +46,7 @@
46 </nav> 46 </nav>
47 <!-- 내비게이션 --> 47 <!-- 내비게이션 -->
48 48
49 +
49 <br> 50 <br>
50 <br> 51 <br>
51 <br> 52 <br>
...@@ -53,22 +54,19 @@ ...@@ -53,22 +54,19 @@
53 <br> 54 <br>
54 <br> 55 <br>
55 <br> 56 <br>
57 + <p id="p1" class="animated fadeOutUp">MBTI+EMOJI=EMOTI</p>
56 <br> 58 <br>
59 + <p id="p2" class="animated fadeOutUp">MBTI가 이모지라면? 그건 바로 EMOTI!</p>
60 +
57 <br> 61 <br>
58 <br> 62 <br>
59 <br> 63 <br>
64 + <p id="p3" class="animated2 fadeIn">당신의 MBTI가 이모지로 어떻게 바뀌었을지</p>
65 + <p id="p4" class="animated2 fadeIn">아래의 카드에서 한 번 찾아보세요!</p>
60 <br> 66 <br>
61 <br> 67 <br>
62 <br> 68 <br>
63 - <br> 69 +
64 - <br>
65 - <br>
66 - <br>
67 - <br>
68 - <br>
69 - <br>
70 - <br>
71 - <br>
72 <br> 70 <br>
73 71
74 <div class="swiper-container"> 72 <div class="swiper-container">
......
...@@ -18,6 +18,7 @@ const audios = [ ...@@ -18,6 +18,7 @@ const audios = [
18 document.getElementById("enfj_audio"), 18 document.getElementById("enfj_audio"),
19 ]; 19 ];
20 const numMbtis = 16; 20 const numMbtis = 16;
21 +const slidesPerView = 5;
21 22
22 /* ======== 23 /* ========
23 Debugger plugin, simple demo plugin to console.log some of callbacks 24 Debugger plugin, simple demo plugin to console.log some of callbacks
...@@ -48,9 +49,9 @@ function myPlugin({ swiper, extendParams, on }) { ...@@ -48,9 +49,9 @@ function myPlugin({ swiper, extendParams, on }) {
48 console.log('sliderMove'); 49 console.log('sliderMove');
49 }); 50 });
50 on('slideChange', () => { 51 on('slideChange', () => {
51 - audios[(swiper.previousIndex + numMbtis - 5) % numMbtis].pause(); 52 + audios[(swiper.previousIndex + numMbtis - slidesPerView) % numMbtis].pause();
52 - audios[(swiper.previousIndex + numMbtis - 5) % numMbtis].currentTime = 0; 53 + audios[(swiper.previousIndex + numMbtis - slidesPerView) % numMbtis].currentTime = 0;
53 - audios[(swiper.activeIndex + numMbtis - 5) % numMbtis].play(); 54 + audios[(swiper.activeIndex + numMbtis - slidesPerView) % numMbtis].play();
54 if (!swiper.params.debugger) return; 55 if (!swiper.params.debugger) return;
55 console.log('slideChange', swiper.previousIndex, '->', swiper.activeIndex); 56 console.log('slideChange', swiper.previousIndex, '->', swiper.activeIndex);
56 }); 57 });
...@@ -92,7 +93,7 @@ Swiper.use([myPlugin]); ...@@ -92,7 +93,7 @@ Swiper.use([myPlugin]);
92 let swiper = new Swiper('.swiper-container', { 93 let swiper = new Swiper('.swiper-container', {
93 loop: true, 94 loop: true,
94 centeredSlides: true, 95 centeredSlides: true,
95 - slidesPerView: '5', 96 + slidesPerView: slidesPerView,
96 navigation: { 97 navigation: {
97 nextEl: '.swiper-button-next', 98 nextEl: '.swiper-button-next',
98 prevEl: '.swiper-button-prev', 99 prevEl: '.swiper-button-prev',
......