송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
rtdtbb8
bc5a7bc0 1 parent 4bf42aca

temp

Expand all
Inline Side-by-side
Showing 21 changed files with 305 additions and 812 deletions
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
...@@ -5,3 +5,59 @@ function createRipple(y, x) { ...@@ -5,3 +5,59 @@ function createRipple(y, x) {
5 $('.ripple').append(_ripple); 5 $('.ripple').append(_ripple);
6 setTimeout(() => _ripple.remove(), 900); 6 setTimeout(() => _ripple.remove(), 900);
7 } 7 }
8 +
9 +function confetti() {
10 + [{
11 + bg: '#b00b00',
12 + position: Math.random() * $('html').width() },
13 + {
14 + bg: '#de1e7e',
15 + position: Math.random() * $('html').width() },
16 + {
17 + bg: '#BADA55',
18 + position: Math.random() * $('html').width() },
19 + {
20 + bg: '#F0FEAF',
21 + position: Math.random() * $('html').width() },
22 + {
23 + bg: '#ac1d1c',
24 + position: Math.random() * $('html').width() },
25 + {
26 + bg: '#facade',
27 + position: Math.random() * $('html').width() },
28 + {
29 + bg: 'transparent',
30 + position: Math.random() * $('html').width(),
31 + internal: '😜' },
32 + {
33 + bg: 'transparent',
34 + position: Math.random() * $('html').width(),
35 + internal: '🌵' },
36 + {
37 + bg: 'transparent',
38 + position: Math.random() * $('html').width(),
39 + internal: '🤑' },
40 + {
41 + bg: 'transparent',
42 + position: Math.random() * $('html').width(),
43 + internal: '🐻' },
44 + {
45 + bg: 'transparent',
46 + position: Math.random() * $('html').width(),
47 + internal: '💰' },
48 + {
49 + bg: 'transparent',
50 + position: Math.random() * $('html').width(),
51 + internal: '🍍' }].
52 + map(options => {
53 + const c = $(`<div class="confetti" style="background:${options.bg};left:${options.position}px;">${options.internal || ''}</div>`);
54 + $('body').append(c);
55 + setTimeout(() => c.remove(), 1900);
56 + });
57 +}
58 +
59 +$('.mui-button').mousedown(e => {
60 + const offset = $(e.target).offset();
61 + createRipple(e.pageY - offset.top, e.pageX - offset.left);
62 + confetti();
63 +});
...\ No newline at end of file ...\ No newline at end of file
......
1 +```
2 +Liam
3 +CEO
4 +Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
5 +
6 +Coco
7 +Mood Maker
8 +
9 +Olivia
10 +Designer
11 +
12 +James
13 +Front-end
14 +
15 +Ella
16 +Back-end
17 +```
...\ No newline at end of file ...\ No newline at end of file
...@@ -3,44 +3,71 @@ ...@@ -3,44 +3,71 @@
3 3
4 <head> 4 <head>
5 <title>EMOJI-HUMAN</title> 5 <title>EMOJI-HUMAN</title>
6 - <link rel="stylesheet" href="/index.css"> 6 + <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css">
7 - <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png"> 7 + <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
8 + <style>
9 + body {
10 + background-image: url("emossage-03.png");
11 + background-repeat: no-repeat;
12 + background-size: 100%;
13 + font-family: Noto Sans KR, regular;
14 + text-align: center;
15 + }
16 + h1 {font-size: 50px;}
17 + p1 {font-size: 24px;}
18 + p2 {font-size: 14px}
19 + p2.small {line-height: 0.7;}
20 + </style>
21 + <div style="height: 100px; overflow: auto">
22 + </div>
23 +
24 +
8 </head> 25 </head>
9 26
10 <body> 27 <body>
28 + <form action="#">
29 +
30 + <header>
31 + <h1>Message + EMOJI<span>= Emossage</span></h1>
32 + <p1>Emoti는 이모지 중심 메세지입니다</p1>
33 + <br>
34 + <p2>
35 + <p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
36 + 여러분만의 이모지 편지를 적어보세요<br> </p2>
37 + </p>
38 + </header>
39 +
40 + <div>
41 + <label class="desc" id="title1" for="Field1">Full Name</label>
42 + <div>
43 + <input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
44 + </div>
45 + </div>
11 46
47 + <div>
48 + <label class="desc" id="title3" for="Field3">
49 + Email
50 + </label>
51 + <div>
52 + <input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
53 + </div>
54 + </div>
12 55
56 + <div>
57 + <label class="desc" id="title4" for="Field4">
58 + Message
59 + </label>
60 +
61 + <div>
62 + <textarea id="Field4" name="Field4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
63 + </div>
64 +
65 + <div>
66 + <input id="saveForm" name="saveForm" type="submit" value="Submit">
67 + </div>
68 + </div>
13 69
14 - <!-- 내비게이션 --> 70 + </form>
15 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
16 - <!--css link-->
17 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
18 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
19 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
20 -
21 - <body id="page-top">
22 - <!--creating a navigation bar-->
23 - <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-->
24 - <div class="container"><!--gives padding of 16px on LHS and RHS-->
25 - <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
26 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
27 - <span></span> Menu <i class="fa fa-bars"></i>
28 - </button>
29 - </div><!--end of button-->
30 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
31 - <ul class="nav navbar-nav">
32 - <li><a href="/index.html">Home</a></li>
33 - </ul>
34 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
35 - <li> <a href="/About Us/About Us.html">About Us</a></li>
36 - <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
37 - <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
38 - <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
39 - </ul>
40 - </div><!--end of collapse-->
41 - </div>
42 - </nav>
43 - <!-- 내비게이션 -->
44 71
45 72
46 73
......
1 +* {
2 + -webkit-box-sizing: border-box;
3 + -moz-box-sizing: border-box;
4 + box-sizing: border-box;
5 + }
6 +
7 + body {
8 + padding: 20px 15%;
9 + }
10 + form header {
11 + margin: 0 0 20px 0;
12 + }
13 + form header div {
14 + font-size: 90%;
15 + color: #999;
16 + }
17 + form header h2 {
18 + margin: 0 0 5px 0;
19 + }
20 + form > div {
21 + clear: both;
22 + overflow: hidden;
23 + padding: 1px;
24 + margin: 0 0 10px 0;
25 + }
26 + form > div > fieldset > div > div {
27 + margin: 0 0 5px 0;
28 + }
29 + form > div > label,
30 + legend {
31 + width: 25%;
32 + float: left;
33 + padding-right: 10px;
34 + }
35 + form > div > div,
36 + form > div > fieldset > div {
37 + width: 75%;
38 + float: right;
39 + }
40 + form > div > fieldset label {
41 + font-size: 90%;
42 + }
43 + fieldset {
44 + border: 0;
45 + padding: 0;
46 + }
47 +
48 + input[type=text],
49 + input[type=email],
50 + input[type=url],
51 + input[type=password],
52 + textarea {
53 + width: 100%;
54 + border-top: 1px solid #ccc;
55 + border-left: 1px solid #ccc;
56 + border-right: 1px solid #eee;
57 + border-bottom: 1px solid #eee;
58 + }
59 + input[type=text],
60 + input[type=email],
61 + input[type=url],
62 + input[type=password] {
63 + width: 50%;
64 + }
65 + input[type=text]:focus,
66 + input[type=email]:focus,
67 + input[type=url]:focus,
68 + input[type=password]:focus,
69 + textarea:focus {
70 + outline: 0;
71 + border-color: #4697e4;
72 + }
73 +
74 + @media (max-width: 600px) {
75 + form > div {
76 + margin: 0 0 15px 0;
77 + }
78 + form > div > label,
79 + legend {
80 + width: 100%;
81 + float: none;
82 + margin: 0 0 5px 0;
83 + }
84 + form > div > div,
85 + form > div > fieldset > div {
86 + width: 100%;
87 + float: none;
88 + }
89 + input[type=text],
90 + input[type=email],
91 + input[type=url],
92 + input[type=password],
93 + textarea,
94 + select {
95 + width: 100%;
96 + }
97 + }
98 + @media (min-width: 1200px) {
99 + form > div > label,
100 + legend {
101 + text-align: right;
102 + }
103 + }
...\ No newline at end of file ...\ No newline at end of file
1 +window.onload = function() {
2 + // Get the window displayed in the iframe.
3 + var receiver = document.getElementById('receiver').contentWindow;
4 +
5 + // Get a reference to the 'Send Message' button.
6 + var btn = document.getElementById('send');
7 +
8 + // A function to handle sending messages.
9 + function sendMessage(e) {
10 + // Prevent any default browser behaviour.
11 + e.preventDefault();
12 +
13 + // Send a message with the text 'Hello Treehouse!' to the new window.
14 + receiver.postMessage('Hello Treehouse!', 'https://odd-mune.github.io');
15 + }
16 +
17 + // Add an event listener that will execute the sendMessage() function
18 + // when the send button is clicked.
19 + btn.addEventListener('click', sendMessage);
20 +}
1 -/* 기존것 */
2 .audio { 1 .audio {
3 align-content: center; 2 align-content: center;
4 margin-right: auto; 3 margin-right: auto;
...@@ -26,7 +25,7 @@ ...@@ -26,7 +25,7 @@
26 -ms-flex-align: center; 25 -ms-flex-align: center;
27 -webkit-align-items: center; 26 -webkit-align-items: center;
28 align-items: center; 27 align-items: center;
29 - box-shadow: 0px 5px 18px -7px #848484; 28 + box-shadow: 0px 2px 10px 0px #848484;
30 } 29 }
31 30
32 .swiper-slide img{ 31 .swiper-slide img{
...@@ -160,9 +159,9 @@ img { ...@@ -160,9 +159,9 @@ img {
160 } 159 }
161 160
162 @media (max-width:767px) { 161 @media (max-width:767px) {
163 -.slideshow__slide { 162 + .slideshow__slide {
164 padding: var(--slide-padding-y) var(--slide-padding-x); 163 padding: var(--slide-padding-y) var(--slide-padding-x);
165 -} 164 + }
166 } 165 }
167 166
168 @media (min-width:768px) and (max-width:1023px) { 167 @media (min-width:768px) and (max-width:1023px) {
...@@ -231,199 +230,4 @@ img { ...@@ -231,199 +230,4 @@ img {
231 flex: 0 0 auto 230 flex: 0 0 auto
232 } 231 }
233 232
234 -.swiper-button-next {
235 - color: rgb(255, 89, 189);
236 -}
237 -
238 -.swiper-button-prev {
239 - color: rgb(255, 89, 189);
240 -}
241 233
242 -.swiper-pagination-bullet-active {
243 - background-color: rgb(255, 89, 189);
244 -}
245 -/* 기존것 */
246 -
247 -
248 -
249 -/* 내비 */
250 -body {
251 - font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
252 - overflow-x: hidden;
253 -}
254 -.center
255 -{
256 - text-align: center;
257 -}
258 -p
259 -{
260 - font-size: 20px;
261 -}
262 -a,
263 -a:hover,
264 -a:focus,
265 -a:active,{
266 - color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
267 - outline: none; /*gives outline to an element*/
268 -}
269 -h2,
270 -h3,
271 -{
272 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
273 - text-transform: uppercase;
274 - font-weight: 700;
275 - font-size: 30px;
276 -}
277 -hr.star-light,
278 -hr.star-primary {
279 - padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
280 - border: none;
281 - border-top: solid 5px;
282 - text-align: center;
283 - max-width: 250px;
284 - margin: 25px auto 30px;
285 -}
286 -hr.star-light:after,
287 -hr.star-primary:after {
288 - content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
289 - font-family: FontAwesome;
290 - display: inline-block;
291 - position: relative;
292 - top: -0.8em;
293 - font-size: 2em;
294 - padding: 0 0.25em;
295 -}
296 -hr.star-light {
297 - border-color: white; /*gives border white*/
298 -}
299 -hr.star-light:after {
300 - background-color: #18BC9C;
301 - color: white;
302 -}
303 -hr.star-primary {
304 - border-color: #2C3E50;
305 -}
306 -hr.star-primary:after {
307 - background-color: white;
308 - color: #2C3E50;
309 -}
310 -header {
311 - text-align: center;
312 - background: #18BC9C;
313 - color: white;
314 -}
315 -header .container {
316 - padding-top: 100px;
317 - padding-bottom: 50px;
318 -}
319 -header .intro .name {
320 - display: block;
321 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
322 - text-transform: uppercase;
323 - font-weight: 700;
324 - font-size: 2em;
325 -}
326 -header .intro .skills {
327 - font-size: 1.25em;
328 - font-weight: 300;/*how much bold*/
329 -}
330 -@media (min-width: 768px) {/* if minimum width exceeds then perform*/
331 - header .container {
332 - padding-top: 200px;
333 - padding-bottom: 100px;
334 - }
335 - header .intro .name {
336 - font-size: 4.75em;
337 - }
338 - header .intro .skills {
339 - font-size: 1.75em;
340 - }
341 -}
342 -.navbar-custom {
343 - background: #2C3E50;
344 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
345 - text-transform: uppercase;
346 - font-weight: 700;
347 - border: none;
348 -}
349 -}
350 -.navbar-custom .navbar-nav {
351 - letter-spacing: 1px;
352 -}
353 -.navbar-custom .navbar-nav li a {
354 - color: white;
355 -}
356 -.navbar-custom .navbar-nav li a:hover {
357 - color: #18BC9C;
358 - outline: none;
359 -}
360 -.navbar-custom .navbar-nav li a:focus,
361 -.navbar-custom .navbar-nav li a:active {
362 - color: white;
363 -}
364 -.navbar-custom .navbar-nav li.active a {
365 - color: white;
366 - background: #18BC9C;
367 -}
368 -.navbar-custom .navbar-nav li.active a:hover,
369 -.navbar-custom .navbar-nav li.active a:focus,
370 -.navbar-custom .navbar-nav li.active a:active {
371 - color: white;
372 - background: #18BC9C;
373 -}
374 -.navbar-custom .navbar-toggle {
375 - color: white;
376 - text-transform: uppercase;
377 - font-size: 10px;
378 - border-color: white;
379 -}
380 -.navbar-custom .navbar-toggle:hover,
381 -.navbar-custom .navbar-toggle:focus {
382 - background-color: #18BC9C;
383 - color: white;
384 - border-color: #18BC9C;
385 -}
386 -footer {
387 - color: white;
388 -}
389 -footer h3 {
390 - margin-bottom: 30px;
391 -}
392 -footer .footer-above {
393 - padding-top: 50px;
394 - background-color: #2C3E50;
395 -}
396 -footer .footer-col {
397 - margin-bottom: 50px;
398 -}
399 -footer .footer-below {
400 - padding: 25px 0;
401 - background-color: #233140;
402 -}
403 -/* 내비 */
404 -
405 -
406 -
407 -
408 -
409 -
410 -/* 그라디언트 배경 */
411 -* {
412 - box-sizing: border-box;
413 - margin: 0;
414 - padding: 0;
415 -}
416 -
417 -body {
418 - width: 100vw;
419 - height: 200vh;
420 - padding: 1rem;
421 - font-family: Avenir, sans-serif;
422 - font-size: 112.5%;
423 - color: #124;
424 - background-image: radial-gradient(rgba(255, 185, 65, 0.7), rgba(255, 0, 0, 0) 40vw), radial-gradient(rgba(255, 186, 186, 0.7), rgba(0, 128, 0, 0) 40vw), radial-gradient(rgba(114, 215, 52, 0.7), rgba(0, 0, 255, 0) 40vw), radial-gradient(rgba(255, 255, 0, 0.7), rgba(255, 255, 0, 0) 40vw), radial-gradient(rgba(255, 0, 0, 0.7), rgba(255, 0, 0, 0) 40vw);
425 - background-position: -30vw 7rem, 50% 10rem, 60vw 14rem, -10vw calc(14rem + 20vw), 30vw calc(14rem + 20vw);
426 - background-size: 80vw 80vw;
427 - background-repeat: no-repeat;
428 -}
429 -/* 그라디언트 배경 */
...\ No newline at end of file ...\ No newline at end of file
......
This diff is collapsed. Click to expand it.
...@@ -2,45 +2,40 @@ ...@@ -2,45 +2,40 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 - <meta charset="UTF-8">
6 <title>EMOJI-HUMAN</title> 5 <title>EMOJI-HUMAN</title>
7 - <link rel="stylesheet" href="/EMOJI-HUMAN.css"> 6 + <link rel="stylesheet" href="="https://odd-mune.github.io/EMOJI-HUMAN//index.css">
8 - <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png"> 7 + <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
9 - 8 +/*
9 + <DIV style="position:absolute; left: 241px; top: 49px;"><A href="https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.html"> About us? </A></div>
10 + <DIV style="position:absolute; left: 964px; top: 49px;"><A href="https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.html"> Emoti</A></div>
11 + <DIV style="position:absolute; left: 1269px; top: 49px;"><A href="https://odd-mune.github.io/EMOJI-HUMAN/EMO-SSAGE/EMO-SSAGE.html"> Emossage</A></div>
12 + */
13 + <style>
14 + body {
15 + background-image: url("emojihuman-04.png");
16 + background-repeat: no-repeat;
17 + background-size: 100%;
18 + font-family: Noto Sans KR, regular;
19 + text-align: center;
20 + }
21 + h1 {font-size: 50px;
22 + letter-spacing: 10px;}
23 + p1 {font-size: 24px;}
24 + p2 {font-size: 14px}
25 + p2.small {line-height: 0.7;}
26 + </style>
27 + <div style="height: 100px; overflow: auto">
28 + </div>
10 </head> 29 </head>
11 30
31 +<body>
32 + <h1>Emoji Human,<span> Who are you?</span></h1>
33 + <p1>이모지 인간의 정체가 궁금해요.</p1>
34 + <br>
35 + <p2>
36 + <p class="small"> 이모지일까요, 인간일까요?<br>
37 + 직접 대화하면서<br> 차근차근 알아가봅시다! </p2>
38 + </p>
12 39
13 -<body style="margin: 0 auto">
14 -
15 - <!-- 내비게이션 -->
16 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
17 - <!--css link-->
18 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
19 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
20 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
21 -
22 - <body id="page-top">
23 - <!--creating a navigation bar-->
24 - <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-->
25 - <div class="container"><!--gives padding of 16px on LHS and RHS-->
26 - <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
27 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
28 - <span></span> Menu <i class="fa fa-bars"></i>
29 - </button>
30 - </div><!--end of button-->
31 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
32 - <ul class="nav navbar-nav">
33 - <li><a href="/index.html">Home</a></li>
34 - </ul>
35 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
36 - <li> <a href="/About Us/About Us.html">About Us</a></li>
37 - <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
38 - <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
39 - <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
40 - </ul>
41 - </div><!--end of collapse-->
42 - </div>
43 - </nav>
44 - <!-- 내비게이션 -->
45 40
46 </body> 41 </body>
......
1 # EMOJI-HUMAN 1 # EMOJI-HUMAN
2 2
3 옥타린 전시회 3 옥타린 전시회
...\ No newline at end of file ...\ No newline at end of file
4 -
5 -by:
6 -
7 -* 송민겸
8 -* 김유진
...\ No newline at end of file ...\ No newline at end of file
......
1 -/*-----------배경 그라디언트-----------*/
2 #gradient-bg{ 1 #gradient-bg{
3 width: 100%; 2 width: 100%;
4 height: 100vh; 3 height: 100vh;
5 background: rgb(255, 255, 255); 4 background: rgb(255, 255, 255);
6 background-image: 5 background-image:
7 - radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(243, 97, 155, 0) 80%), 6 + radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 80%),
8 radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%), 7 radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%),
9 radial-gradient(circle farthest-corner at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%), 8 radial-gradient(circle farthest-corner at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),
10 radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%); 9 radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%);
11 animation: colorChange 6s infinite alternate-reverse; 10 animation: colorChange 6s infinite alternate-reverse;
11 +
12 } 12 }
13 13
14 @keyframes colorChange { 14 @keyframes colorChange {
...@@ -114,389 +114,3 @@ ...@@ -114,389 +114,3 @@
114 1% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50.5%);} 114 1% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50.5%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50.5%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50.5%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50.5%);}
115 0% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50%);} 115 0% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 50%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 50%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 50%);}
116 } 116 }
...\ No newline at end of file ...\ No newline at end of file
117 -/*-----------배경 그라디언트-----------*/
118 -
119 -:root {
120 - --FACE_WIDTH: 450px;
121 - --FACE_HEIGHT: 450px;
122 - --SHINE_WIDTH: calc(calc(194/230) * var(--FACE_WIDTH));
123 - --SHINE_HEIGHT: calc(calc(206/230) * var(--FACE_HEIGHT));
124 - --EYE_WIDTH: calc(calc(24/230) * var(--FACE_WIDTH));
125 - --EYE_HEIGHT: calc(calc(38/230) * var(--FACE_HEIGHT));
126 - --EYE_LEFT_RIGHT: calc(calc(70/230) * var(--FACE_WIDTH));
127 - --EYE_LEFT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
128 - --EYE_RIGHT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
129 - --EYE_RIGHT_LEFT: calc(calc(70/230) * var(--FACE_WIDTH));
130 - --MOUTH_TOP: calc(calc(88/230) * var(--FACE_HEIGHT));
131 - --MOUTH_WIDTH: calc(calc(94/230) * var(--FACE_WIDTH));
132 - --MOUTH_HEIGHT: calc(calc(48/230) * var(--FACE_HEIGHT));
133 - --MOUTH_BEFORE_BOTTOM: calc(calc(10/230) * var(--FACE_HEIGHT));
134 - --MOUTH_AFTER_BOTTOM: calc(calc(26/230) * var(--FACE_HEIGHT));
135 -}
136 -
137 -/* 이모지 얼굴 */
138 -body {
139 - display: flex;
140 - align-items: center;
141 - justify-content: center;
142 - height: 100vh;
143 - }
144 -
145 - #emoji {
146 - position: relative;
147 - width: var(--FACE_WIDTH);
148 - height: var(--FACE_HEIGHT);
149 - transform: translate3d(0, 0, 0);
150 - }
151 -
152 - .layer {
153 - position: absolute;
154 - width: 100%;
155 - height: 100%;
156 - }
157 -
158 - .face {
159 - position: absolute;
160 - top: 0;
161 - right: 0;
162 - bottom: 0;
163 - left: 0;
164 - margin: auto;
165 - width: var(--FACE_WIDTH);
166 - height: var(--FACE_HEIGHT);
167 - background-color: #FECA32;
168 - border-radius: 100%;
169 - box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px;
170 - }
171 -
172 - .shine {
173 - position: absolute;
174 - top: 0;
175 - right: 0;
176 - bottom: 0;
177 - left: 0;
178 - margin: auto;
179 - width: var(--SHINE_WIDTH);
180 - height: var(--SHINE_HEIGHT);
181 - background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
182 - border-radius: 100%;
183 - opacity: 0.8;
184 - }
185 -
186 - .eye {
187 - width: var(--EYE_WIDTH);
188 - height: var(--EYE_HEIGHT);
189 - background-color: #A1620F;
190 - border-radius: 100%;
191 - box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px, rgba(255, 255, 255, 0.2) 0 2px 0 2px;
192 - -webkit-animation: blink 5s infinite;
193 - animation: blink 5s infinite;
194 - }
195 - .eye.left {
196 - position: absolute;
197 - top: 0;
198 - right: var(--EYE_LEFT_RIGHT);
199 - bottom: var(--EYE_LEFT_BOTTOM);
200 - left: 0;
201 - margin: auto;
202 - }
203 - .eye.right {
204 - position: absolute;
205 - top: 0;
206 - right: 0;
207 - bottom: var(--EYE_RIGHT_BOTTOM);
208 - left: var(--EYE_RIGHT_LEFT);
209 - margin: auto;
210 - }
211 -
212 - .mouth {
213 - position: absolute;
214 - top: var(--MOUTH_TOP);
215 - right: 0;
216 - bottom: 0;
217 - left: 0;
218 - margin: auto;
219 - overflow: hidden;
220 - width: var(--MOUTH_WIDTH);
221 - height: var(--MOUTH_HEIGHT);
222 - transform: translate3d(0, 0, 0);
223 - }
224 - .mouth:before {
225 - position: absolute;
226 - top: 0;
227 - right: 0;
228 - bottom: var(--MOUTH_BEFORE_BOTTOM);
229 - left: 0;
230 - margin: auto;
231 - content: "";
232 - width: 100%;
233 - height: 100%;
234 - background-color: #6E440B;
235 - border-radius: 100%;
236 - box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0;
237 - transform: scale(1);
238 - }
239 - .mouth:after {
240 - position: absolute;
241 - top: 0;
242 - right: 0;
243 - bottom: var(--MOUTH_AFTER_BOTTOM);
244 - left: 0;
245 - margin: auto;
246 - content: "";
247 - width: calc(100% - 20px);
248 - height: 100%;
249 - background-color: #FECA32;
250 - border-radius: 100%;
251 - box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px;
252 - transform-origin: 50% 100%;
253 - transform: scale(1.6);
254 - }
255 -
256 - @-webkit-keyframes blink {
257 - 0%, 96% {
258 - transform: scaleY(1);
259 - }
260 - 98% {
261 - transform: scaleY(0.1);
262 - }
263 - 100% {
264 - transform: scaleY(1);
265 - }
266 - }
267 -
268 - @keyframes blink {
269 - 0%, 96% {
270 - transform: scaleY(1);
271 - }
272 - 98% {
273 - transform: scaleY(0.1);
274 - }
275 - 100% {
276 - transform: scaleY(1);
277 - }
278 - }
279 - /* 이모지 얼굴 */
280 -
281 -/* 내비 */
282 -body {
283 - font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
284 - overflow-x: hidden;
285 -}
286 -.center
287 -{
288 - text-align: center;
289 -}
290 -p
291 -{
292 - font-size: 20px;
293 -}
294 -a,
295 -a:hover,
296 -a:focus,
297 -a:active,{
298 - color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
299 - outline: none; /*gives outline to an element*/
300 -}
301 -h2,
302 -h3,
303 -{
304 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
305 - text-transform: uppercase;
306 - font-weight: 700;
307 - font-size: 30px;
308 -}
309 -hr.star-light,
310 -hr.star-primary {
311 - padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
312 - border: none;
313 - border-top: solid 5px;
314 - text-align: center;
315 - max-width: 250px;
316 - margin: 25px auto 30px;
317 -}
318 -hr.star-light:after,
319 -hr.star-primary:after {
320 - content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
321 - font-family: FontAwesome;
322 - display: inline-block;
323 - position: relative;
324 - top: -0.8em;
325 - font-size: 2em;
326 - padding: 0 0.25em;
327 -}
328 -hr.star-light {
329 - border-color: white; /*gives border white*/
330 -}
331 -hr.star-light:after {
332 - background-color: #18BC9C;
333 - color: white;
334 -}
335 -hr.star-primary {
336 - border-color: #2C3E50;
337 -}
338 -hr.star-primary:after {
339 - background-color: white;
340 - color: #2C3E50;
341 -}
342 -header {
343 - text-align: center;
344 - background: #18BC9C;
345 - color: white;
346 -}
347 -header .container {
348 - padding-top: 100px;
349 - padding-bottom: 50px;
350 -}
351 -header .intro .name {
352 - display: block;
353 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
354 - text-transform: uppercase;
355 - font-weight: 700;
356 - font-size: 2em;
357 -}
358 -header .intro .skills {
359 - font-size: 1.25em;
360 - font-weight: 300;/*how much bold*/
361 -}
362 -@media (min-width: 768px) {/* if minimum width exceeds then perform*/
363 - header .container {
364 - padding-top: 200px;
365 - padding-bottom: 100px;
366 - }
367 - header .intro .name {
368 - font-size: 4.75em;
369 - }
370 - header .intro .skills {
371 - font-size: 1.75em;
372 - }
373 -}
374 -.navbar-custom {
375 - background: #2C3E50;
376 - font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
377 - text-transform: uppercase;
378 - font-weight: 700;
379 - border: none;
380 -}
381 -}
382 -.navbar-custom .navbar-nav {
383 - letter-spacing: 1px;
384 -}
385 -.navbar-custom .navbar-nav li a {
386 - color: white;
387 -}
388 -.navbar-custom .navbar-nav li a:hover {
389 - color: #18BC9C;
390 - outline: none;
391 -}
392 -.navbar-custom .navbar-nav li a:focus,
393 -.navbar-custom .navbar-nav li a:active {
394 - color: white;
395 -}
396 -.navbar-custom .navbar-nav li.active a {
397 - color: white;
398 - background: #18BC9C;
399 -}
400 -.navbar-custom .navbar-nav li.active a:hover,
401 -.navbar-custom .navbar-nav li.active a:focus,
402 -.navbar-custom .navbar-nav li.active a:active {
403 - color: white;
404 - background: #18BC9C;
405 -}
406 -.navbar-custom .navbar-toggle {
407 - color: white;
408 - text-transform: uppercase;
409 - font-size: 10px;
410 - border-color: white;
411 -}
412 -.navbar-custom .navbar-toggle:hover,
413 -.navbar-custom .navbar-toggle:focus {
414 - background-color: #18BC9C;
415 - color: white;
416 - border-color: #18BC9C;
417 -}
418 -footer {
419 - color: white;
420 -}
421 -footer h3 {
422 - margin-bottom: 30px;
423 -}
424 -footer .footer-above {
425 - padding-top: 50px;
426 - background-color: #2C3E50;
427 -}
428 -footer .footer-col {
429 - margin-bottom: 50px;
430 -}
431 -footer .footer-below {
432 - padding: 25px 0;
433 - background-color: #233140;
434 -}
435 -/* 내비 */
436 -
437 -
438 -
439 -
440 -/* 이모지 레인 */
441 -body{
442 - margin: 0;
443 - padding: 0;
444 - width: 100%;
445 - height: 100vh;
446 - background: #000;
447 - font-family: 'Oswald', sans-serif;
448 -}
449 -
450 -#text {
451 - display: flex;
452 - height: 100vh;
453 - align-items: center;
454 - justify-content: center;
455 - text-align: center;
456 -}
457 -
458 -#container {
459 - left: 0px;
460 - top: -100px;
461 - height: calc(100vh + 100px);
462 - overflow: hidden;
463 - position: relative;
464 -}
465 -
466 -#animate{
467 - margin: 0 auto;
468 - width: 20px;
469 - overflow: visible;
470 - position: relative;
471 -}
472 -
473 -#all{
474 - overflow: hidden;
475 - height: 100vh;
476 - width: 100%;
477 - position: fixed;
478 -}
479 -
480 -#footer{
481 - color: #ffc0cb;
482 - text-decoration: none;
483 - position: fixed;
484 - width: 752px;
485 - bottom: 20px;
486 - align-content: center;
487 - float: none;
488 - margin-left: calc(50% - 376px);
489 -}
490 -
491 -#a, p{
492 - text-decoration: none;
493 - color: #FFFFFF;
494 - letter-spacing: 6px;
495 - transition: all 0.5s ease-in-out;
496 - width: auto;
497 - margin: 0 auto;
498 - text-align: center;
499 - align-items: center;
500 -}
501 -
502 -/* 이모지 레인 */
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,93 +2,26 @@ ...@@ -2,93 +2,26 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 - <meta charset="UTF-8">
6 <title>EMOJI-HUMAN</title> 5 <title>EMOJI-HUMAN</title>
7 - <link rel="stylesheet" href="/index.css"> 6 + <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css">
8 - <link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png"> 7 + <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
9 - <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">
10 </head> 8 </head>
11 9
12 -<body style="margin: 0 auto"> 10 +<body>
13 11
14 - <!-- 큰 묶음은 배경임 --> 12 + <!-- partial:index.partial.html -->
15 <div id="gradient-bg"> 13 <div id="gradient-bg">
16 -
17 - <!-- 내비게이션 -->
18 - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
19 - <!--css link-->
20 - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
21 - <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
22 - <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
23 -
24 - <body id="page-top">
25 - <!--creating a navigation bar-->
26 - <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-->
27 - <div class="container"><!--gives padding of 16px on LHS and RHS-->
28 - <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
29 - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
30 - <span></span> Menu <i class="fa fa-bars"></i>
31 - </button>
32 - </div><!--end of button-->
33 - <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
34 - <ul class="nav navbar-nav">
35 - <li><a href="/index.html">Home</a></li>
36 - </ul>
37 - <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
38 - <li> <a href="/About Us/About Us.html">About Us</a></li>
39 - <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
40 - <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
41 - <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
42 - </ul>
43 </div> 14 </div>
44 - </div> 15 + <!-- partial -->
45 - </nav> 16 + <script src="https://odd-mune.github.io/EMOJI-HUMAN/index.js"></script>
46 - <!-- 내비게이션 -->
47 17
18 + <button id="button1" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.html'">About Us</button>
19 + <button id="button2" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMOJI-HUMAN/EMOJI-HUMAN.html'">EMOJI-HUMAN</button>
20 + <button id="button3" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.html'">EMO-TI</button>
21 + <button id="button4" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-SSAGE/EMO-SSAGE.html'">EMO-SSAGE</button>
48 22
49 - <!-- 이모지 얼굴 --> 23 + <br />
50 - <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;"> 24 + <hr />
51 - <ul id="emoji">
52 - <li class="layer" data-depth="0.2">
53 - <div class="face"></div>
54 - </li>
55 - <li class="layer" data-depth="0.3">
56 - <div class="shine"></div>
57 - </li>
58 - <li class="layer" data-depth="0.8">
59 - <div class="eye left"></div>
60 - </li>
61 - <li class="layer" data-depth="0.8">
62 - <div class="eye right"></div>
63 - </li>
64 - <li class="layer" data-depth="0.8">
65 - <div class="mouth"></div>
66 - </li>
67 - </ul>
68 25
69 - <script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js'></script><script>src="/face.js"></script>
70 - </div>
71 - <!-- 이모지 얼굴 -->
72 26
73 - <!-- 이모지 레인 -->
74 - <div style="z-index: 1;">
75 - <link href="https://fonts.googleapis.com/css?family=Oswald:600,700" rel="stylesheet">
76 - <div id="all">
77 - <div id="container">
78 - <div id="animate">
79 - </div>
80 - </div>
81 - </div>
82 -
83 - <div id="footer" style="">
84 - <p>W e l c o m e &nbsp;&nbsp;t o &nbsp;&nbsp;E M O J I &nbsp;&nbsp;H U M A N &nbsp;&nbsp;W o r l d</p>
85 - </div>
86 -
87 - <script src="/index.js"></script>
88 - </div>
89 - <!-- 이모지 레인 -->
90 -
91 - </div>
92 - <script src="/index.js"></script>
93 - <!-- 큰 묶음은 배경임 -->
94 </body> 27 </body>
......
1 -// 배경 그라디언트 1 +//the only purpose of this is to generate the CSS keyframes
2 +
2 var str = 0; 3 var str = 0;
3 var num = 100; 4 var num = 100;
4 var porcents = 100; 5 var porcents = 100;
...@@ -11,75 +12,3 @@ var str = 0; ...@@ -11,75 +12,3 @@ var str = 0;
11 num = num - 0.5; 12 num = num - 0.5;
12 porcents = porcents -1; 13 porcents = porcents -1;
13 } 14 }
...\ No newline at end of file ...\ No newline at end of file
14 -// 배경 그라디언트
15 -
16 -
17 -
18 -
19 -// 이모지 레인
20 - var container = document.getElementById('animate');
21 - var emoji = ['🍹', '🐻', '✌', '🍒', '🥕', '🎸', '🍭', '💖', '🥰', '🎵', '🌏', '🍰', '🎃', '🎅', '🌈', '🌷', '🥳', '🦄', '🍀', '👻', '🌴', '🐬', '🎁'];
22 - var circles = [];
23 -
24 - for (var i = 0; i < 15; i++) {
25 - addCircle(i * 150, [10 + 0, 300], emoji[Math.floor(Math.random() * emoji.length)]);
26 - addCircle(i * 150, [10 + 0, -300], emoji[Math.floor(Math.random() * emoji.length)]);
27 - addCircle(i * 150, [10 - 200, -300], emoji[Math.floor(Math.random() * emoji.length)]);
28 - addCircle(i * 150, [10 + 200, 300], emoji[Math.floor(Math.random() * emoji.length)]);
29 - addCircle(i * 150, [10 - 400, -300], emoji[Math.floor(Math.random() * emoji.length)]);
30 - addCircle(i * 150, [10 + 400, 300], emoji[Math.floor(Math.random() * emoji.length)]);
31 - addCircle(i * 150, [10 - 600, -300], emoji[Math.floor(Math.random() * emoji.length)]);
32 - addCircle(i * 150, [10 + 600, 300], emoji[Math.floor(Math.random() * emoji.length)]);
33 - }
34 -
35 -
36 -
37 - function addCircle(delay, range, color) {
38 - setTimeout(function() {
39 - var c = new Circle(range[0] + Math.random() * range[1], 80 + Math.random() * 4, color, {
40 - x: -0.15 + Math.random() * 0.3,
41 - y: 1 + Math.random() * 1
42 - }, range);
43 - circles.push(c);
44 - }, delay);
45 - }
46 -
47 - function Circle(x, y, c, v, range) {
48 - var _this = this;
49 - this.x = x;
50 - this.y = y;
51 - this.color = c;
52 - this.v = v;
53 - this.range = range;
54 - this.element = document.createElement('span');
55 - /*this.element.style.display = 'block';*/
56 - this.element.style.opacity = 0;
57 - this.element.style.position = 'absolute';
58 - this.element.style.fontSize = '26px';
59 - this.element.style.color = 'hsl('+(Math.random()*360|0)+',80%,50%)';
60 - this.element.innerHTML = c;
61 - container.appendChild(this.element);
62 -
63 - this.update = function() {
64 - if (_this.y > 800) {
65 - _this.y = 80 + Math.random() * 4;
66 - _this.x = _this.range[0] + Math.random() * _this.range[1];
67 - }
68 - _this.y += _this.v.y;
69 - _this.x += _this.v.x;
70 - this.element.style.opacity = 1;
71 - this.element.style.transform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
72 - this.element.style.webkitTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
73 - this.element.style.mozTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
74 - };
75 - }
76 -
77 - function animate() {
78 - for (var i in circles) {
79 - circles[i].update();
80 - }
81 - requestAnimationFrame(animate);
82 - }
83 -
84 - animate();
85 -// 이모지 레인
...\ No newline at end of file ...\ No newline at end of file
......

135 KB | W: | H:

75.5 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin

107 KB | W: | H:

59.9 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin