송민겸 / EMOJI-HUMAN

Go to a project
Toggle navigation Toggle navigation pinning
송민겸
78b97ace 1 parent 04a4aef7

final merge

Expand all
Inline Side-by-side
Showing 11 changed files with 852 additions and 130 deletions
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
...@@ -5,59 +5,3 @@ function createRipple(y, x) { ...@@ -5,59 +5,3 @@ 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 +/* 기존것 */
1 .audio { 2 .audio {
2 align-content: center; 3 align-content: center;
3 margin-right: auto; 4 margin-right: auto;
...@@ -25,7 +26,7 @@ ...@@ -25,7 +26,7 @@
25 -ms-flex-align: center; 26 -ms-flex-align: center;
26 -webkit-align-items: center; 27 -webkit-align-items: center;
27 align-items: center; 28 align-items: center;
28 - box-shadow: 0px 2px 10px 0px #848484; 29 + box-shadow: 0px 5px 18px -7px #848484;
29 } 30 }
30 31
31 .swiper-slide img{ 32 .swiper-slide img{
...@@ -159,9 +160,9 @@ img { ...@@ -159,9 +160,9 @@ img {
159 } 160 }
160 161
161 @media (max-width:767px) { 162 @media (max-width:767px) {
162 - .slideshow__slide { 163 +.slideshow__slide {
163 padding: var(--slide-padding-y) var(--slide-padding-x); 164 padding: var(--slide-padding-y) var(--slide-padding-x);
164 - } 165 +}
165 } 166 }
166 167
167 @media (min-width:768px) and (max-width:1023px) { 168 @media (min-width:768px) and (max-width:1023px) {
...@@ -230,4 +231,199 @@ img { ...@@ -230,4 +231,199 @@ img {
230 flex: 0 0 auto 231 flex: 0 0 auto
231 } 232 }
232 233
234 +.swiper-button-next {
235 + color: rgb(255, 89, 189);
236 +}
237 +
238 +.swiper-button-prev {
239 + color: rgb(255, 89, 189);
240 +}
233 241
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
......
...@@ -29,6 +29,8 @@ ...@@ -29,6 +29,8 @@
29 29
30 </head> 30 </head>
31 31
32 + <!-- style="background-image: url(/src/background-01.png); background-position: center; background-size: cover;" -->
33 +
32 <body> 34 <body>
33 35
34 <h1>MBTI + EMOJI<span>= EMOTI</span></h1> 36 <h1>MBTI + EMOJI<span>= EMOTI</span></h1>
...@@ -39,73 +41,105 @@ ...@@ -39,73 +41,105 @@
39 아래의 카드에서 한 번 찾아보세요!<br> </p2> 41 아래의 카드에서 한 번 찾아보세요!<br> </p2>
40 </p> 42 </p>
41 43
44 + <body id="page-top">
45 + <!--creating a navigation bar-->
46 + <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-->
47 + <div class="container"><!--gives padding of 16px on LHS and RHS-->
48 + <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
49 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
50 + <span></span> Menu <i class="fa fa-bars"></i>
51 + </button>
52 + </div><!--end of button-->
53 + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
54 + <ul class="nav navbar-nav">
55 + <li><a href="/index.html">Home</a></li>
56 + </ul>
57 + <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
58 + <li> <a href="/About Us/About Us.html">About Us</a></li>
59 + <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
60 + <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
61 + <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
62 + </ul>
63 + </div><!--end of collapse-->
64 + </div>
65 + </nav>
66 + <!-- 내비게이션 -->
42 67
43 - 68 + <br>
69 + <br>
70 + <br>
71 + <br>
72 + <br>
73 + <br>
74 + <br>
75 + <br>
76 + <br>
77 + <br>
78 + <br>
79 + <br>
80 + <br>
81 + <br>
82 + <br>
83 + <br>
84 + <br>
85 + <br>
86 + <br>
87 + <br>
88 + <br>
89 + <br>
90 + <br>
91 + <br>
44 92
45 <div class="swiper-container"> 93 <div class="swiper-container">
46 <div class="swiper-wrapper"> 94 <div class="swiper-wrapper">
47 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISTP.jpg"></div> <!-- 0 --> 95 + <div class="swiper-slide"><img src="/src/ISTP.jpg"></div>
48 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISTJ.jpg"></div> <!-- 1 --> 96 + <div class="swiper-slide"><img src="/src/ISTJ.jpg"></div>
49 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISFP.jpg"></div> <!-- 2 --> 97 + <div class="swiper-slide"><img src="/src/ISFP.jpg"></div>
50 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ISFJ.jpg"></div> <!-- 3 --> 98 + <div class="swiper-slide"><img src="/src/ISFJ.jpg"></div>
51 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INTP.jpg"></div> <!-- 4 --> 99 + <div class="swiper-slide"><img src="/src/INTP.jpg"></div>
52 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INTJ.jpg"></div> <!-- 5 --> 100 + <div class="swiper-slide"><img src="/src/INTJ.jpg"></div>
53 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INFP.jpg"></div> <!-- 6 --> 101 + <div class="swiper-slide"><img src="/src/INFP.jpg"></div>
54 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/INFJ.jpg"></div> <!-- 7 --> 102 + <div class="swiper-slide"><img src="/src/INFJ.jpg"></div>
55 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESTP.jpg"></div> <!-- 8 --> 103 + <div class="swiper-slide"><img src="/src/ESTP.jpg"></div>
56 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESTJ.jpg"></div> <!-- 9 --> 104 + <div class="swiper-slide"><img src="/src/ESTJ.jpg"></div>
57 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESFP.jpg"></div> <!-- 10 --> 105 + <div class="swiper-slide"><img src="/src/ESFP.jpg"></div>
58 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ESFJ.jpg"></div> <!-- 11 --> 106 + <div class="swiper-slide"><img src="/src/ESFJ.jpg"></div>
59 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENTP.jpg"></div> <!-- 12 --> 107 + <div class="swiper-slide"><img src="/src/ENTP.jpg"></div>
60 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENTJ.jpg"></div> <!-- 13 --> 108 + <div class="swiper-slide"><img src="/src/ENTJ.jpg"></div>
61 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENFP.jpg"></div> <!-- 14 --> 109 + <div class="swiper-slide"><img src="/src/ENFP.jpg"></div>
62 - <div class="swiper-slide"><img src="https://odd-mune.github.io/EMOJI-HUMAN/src/ENFJ.jpg"></div> <!-- 15 --> 110 + <div class="swiper-slide"><img src="/src/ENFJ.jpg"></div>
63 </div> 111 </div>
64 <!-- If we need pagination --> 112 <!-- If we need pagination -->
113 + <br>
114 + <br>
115 + <br>
116 +
65 <div class="swiper-pagination"></div> 117 <div class="swiper-pagination"></div>
66 <!-- Add Arrows --> 118 <!-- Add Arrows -->
67 <div class="swiper-button-next"></div> 119 <div class="swiper-button-next"></div>
68 <div class="swiper-button-prev"></div> 120 <div class="swiper-button-prev"></div>
69 - </div> 121 + <!-- </div> -->
70 - <script src="https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.js" type="module"></script> 122 + <script src="/EMO-TI/EMO-TI.js" type="module"></script>
71 <div style="align-content: center;"> 123 <div style="align-content: center;">
72 - <audio id="istp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Burn The House Down.mp3" loop controls hidden></audio> 124 + <audio id="istp_audio" src="/src/Burn The House Down.mp3" loop controls hidden></audio>
73 - <audio id="istj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Rise.mp3" loop controls hidden></audio> 125 + <audio id="istj_audio" src="/src/Rise.mp3" loop controls hidden></audio>
74 - <audio id="isfp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/비밀의 화원.mp3" loop controls hidden></audio> 126 + <audio id="isfp_audio" src="/src/비밀의 화원.mp3" loop controls hidden></audio>
75 - <audio id="isfj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/always ill care.mp3" loop controls hidden></audio> 127 + <audio id="isfj_audio" src="/src/always ill care.mp3" loop controls hidden></audio>
76 - <audio id="intp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Like That.mp3" loop controls hidden></audio> 128 + <audio id="intp_audio" src="/src/Like That.mp3" loop controls hidden></audio>
77 - <audio id="intj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Va Va Vis.mp3" loop controls hidden></audio> 129 + <audio id="intj_audio" src="/src/Va Va Vis.mp3" loop controls hidden></audio>
78 - <audio id="infp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/괜찮아도 괜찮아.mp3" loop controls hidden></audio> 130 + <audio id="infp_audio" src="/src/괜찮아도 괜찮아.mp3" loop controls hidden></audio>
79 - <audio id="infj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Shining.mp3" loop controls hidden></audio> 131 + <audio id="infj_audio" src="/src/Shining.mp3" loop controls hidden></audio>
80 - <audio id="estp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Break The Rules.mp3" loop controls hidden></audio> 132 + <audio id="estp_audio" src="/src/Break The Rules.mp3" loop controls hidden></audio>
81 - <audio id="estj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Kings Queens.mp3" loop controls hidden></audio> 133 + <audio id="estj_audio" src="/src/Kings Queens.mp3" loop controls hidden></audio>
82 - <audio id="esfp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Beautiful Beautiful.mp3" loop controls hidden></audio> 134 + <audio id="esfp_audio" src="/src/Beautiful Beautiful.mp3" loop controls hidden></audio>
83 - <audio id="esfj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Slow Ride.mp3" loop controls hidden></audio> 135 + <audio id="esfj_audio" src="/src/Slow Ride.mp3" loop controls hidden></audio>
84 - <audio id="entp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/불꽃놀이.mp3" loop controls hidden></audio> 136 + <audio id="entp_audio" src="/src/불꽃놀이.mp3" loop controls hidden></audio>
85 - <audio id="entj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Boss Bitch.mp3" loop controls hidden></audio> 137 + <audio id="entj_audio" src="/src/Boss Bitch.mp3" loop controls hidden></audio>
86 - <audio id="enfp_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Moonshot.mp3" loop controls hidden></audio> 138 + <audio id="enfp_audio" src="/src/Moonshot.mp3" loop controls hidden></audio>
87 - <audio id="enfj_audio" src="https://odd-mune.github.io/EMOJI-HUMAN/src/Island Island.mp3" loop controls hidden></audio> 139 + <audio id="enfj_audio" src="/src/Island Island.mp3" loop controls hidden></audio>
88 </div> 140 </div>
89 -<br> 141 +
90 -<br> 142 +
91 -<br>
92 -<br>
93 -<br>
94 -<br>
95 -<br>
96 -<br>
97 -<br>
98 -<br>
99 -<br>
100 -<br>
101 -<br>
102 -<br>
103 -<br>
104 -<br>
105 -<br>
106 -<br>
107 -<br>
108 -<br>
109 </body> 143 </body>
110 144
111 </html> 145 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 + <meta charset="UTF-8">
5 <title>EMOJI-HUMAN</title> 6 <title>EMOJI-HUMAN</title>
6 <link rel="stylesheet" href="="https://odd-mune.github.io/EMOJI-HUMAN//index.css"> 7 <link rel="stylesheet" href="="https://odd-mune.github.io/EMOJI-HUMAN//index.css">
7 <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png"> 8 <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
...@@ -37,5 +38,28 @@ ...@@ -37,5 +38,28 @@
37 직접 대화하면서<br> 차근차근 알아가봅시다! </p2> 38 직접 대화하면서<br> 차근차근 알아가봅시다! </p2>
38 </p> 39 </p>
39 40
41 + <body id="page-top">
42 + <!--creating a navigation bar-->
43 + <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-->
44 + <div class="container"><!--gives padding of 16px on LHS and RHS-->
45 + <div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
46 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
47 + <span></span> Menu <i class="fa fa-bars"></i>
48 + </button>
49 + </div><!--end of button-->
50 + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
51 + <ul class="nav navbar-nav">
52 + <li><a href="/index.html">Home</a></li>
53 + </ul>
54 + <ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
55 + <li> <a href="/About Us/About Us.html">About Us</a></li>
56 + <li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
57 + <li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
58 + <li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
59 + </ul>
60 + </div><!--end of collapse-->
61 + </div>
62 + </nav>
63 + <!-- 내비게이션 -->
40 64
41 </body> 65 </body>
......
1 +/*-----------배경 그라디언트-----------*/
1 #gradient-bg{ 2 #gradient-bg{
2 width: 100%; 3 width: 100%;
3 height: 100vh; 4 height: 100vh;
4 background: rgb(255, 255, 255); 5 background: rgb(255, 255, 255);
5 background-image: 6 background-image:
6 - radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 80%), 7 + radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(243, 97, 155, 0) 80%),
7 radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%), 8 radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%),
8 radial-gradient(circle farthest-corner at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%), 9 radial-gradient(circle farthest-corner at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 50%),
9 radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%); 10 radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 100%);
10 animation: colorChange 6s infinite alternate-reverse; 11 animation: colorChange 6s infinite alternate-reverse;
11 -
12 } 12 }
13 13
14 @keyframes colorChange { 14 @keyframes colorChange {
...@@ -114,3 +114,389 @@ ...@@ -114,3 +114,389 @@
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 }
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,26 +2,93 @@ ...@@ -2,26 +2,93 @@
2 <html lang="ko"> 2 <html lang="ko">
3 3
4 <head> 4 <head>
5 + <meta charset="UTF-8">
5 <title>EMOJI-HUMAN</title> 6 <title>EMOJI-HUMAN</title>
6 - <link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css"> 7 + <link rel="stylesheet" href="/index.css">
7 - <link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png"> 8 + <link rel="icon" type="image/x-icon" href="/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">
8 </head> 10 </head>
9 11
10 -<body> 12 +<body style="margin: 0 auto">
11 13
12 - <!-- partial:index.partial.html --> 14 + <!-- 큰 묶음은 배경임 -->
13 <div id="gradient-bg"> 15 <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>
14 </div> 43 </div>
15 - <!-- partial --> 44 + </div>
16 - <script src="https://odd-mune.github.io/EMOJI-HUMAN/index.js"></script> 45 + </nav>
46 + <!-- 내비게이션 -->
17 47
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>
22 48
23 - <br /> 49 + <!-- 이모지 얼굴 -->
24 - <hr /> 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;">
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>
25 68
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 + <!-- 이모지 얼굴 -->
26 72
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 + <!-- 큰 묶음은 배경임 -->
27 </body> 94 </body>
...\ No newline at end of file ...\ No newline at end of file
......
1 -//the only purpose of this is to generate the CSS keyframes 1 +// 배경 그라디언트
2 -
3 var str = 0; 2 var str = 0;
4 var num = 100; 3 var num = 100;
5 var porcents = 100; 4 var porcents = 100;
...@@ -12,3 +11,75 @@ var str = 0; ...@@ -12,3 +11,75 @@ var str = 0;
12 num = num - 0.5; 11 num = num - 0.5;
13 porcents = porcents -1; 12 porcents = porcents -1;
14 } 13 }
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
......