송민겸 / 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 317 additions and 628 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) {
$('.ripple').append(_ripple);
setTimeout(() => _ripple.remove(), 900);
}
function confetti() {
[{
bg: '#b00b00',
position: Math.random() * $('html').width() },
{
bg: '#de1e7e',
position: Math.random() * $('html').width() },
{
bg: '#BADA55',
position: Math.random() * $('html').width() },
{
bg: '#F0FEAF',
position: Math.random() * $('html').width() },
{
bg: '#ac1d1c',
position: Math.random() * $('html').width() },
{
bg: '#facade',
position: Math.random() * $('html').width() },
{
bg: 'transparent',
position: Math.random() * $('html').width(),
internal: '😜' },
{
bg: 'transparent',
position: Math.random() * $('html').width(),
internal: '🌵' },
{
bg: 'transparent',
position: Math.random() * $('html').width(),
internal: '🤑' },
{
bg: 'transparent',
position: Math.random() * $('html').width(),
internal: '🐻' },
{
bg: 'transparent',
position: Math.random() * $('html').width(),
internal: '💰' },
{
bg: 'transparent',
position: Math.random() * $('html').width(),
internal: '🍍' }].
map(options => {
const c = $(`<div class="confetti" style="background:${options.bg};left:${options.position}px;">${options.internal || ''}</div>`);
$('body').append(c);
setTimeout(() => c.remove(), 1900);
});
}
$('.mui-button').mousedown(e => {
const offset = $(e.target).offset();
createRipple(e.pageY - offset.top, e.pageX - offset.left);
confetti();
});
\ No newline at end of file
......
```
Liam
CEO
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
Coco
Mood Maker
Olivia
Designer
James
Front-end
Ella
Back-end
```
\ No newline at end of file
......@@ -3,45 +3,72 @@
<head>
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="/index.css">
<link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
<link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css">
<link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
<style>
body {
background-image: url("emossage-03.png");
background-repeat: no-repeat;
background-size: 100%;
font-family: Noto Sans KR, regular;
text-align: center;
}
h1 {font-size: 50px;}
p1 {font-size: 24px;}
p2 {font-size: 14px}
p2.small {line-height: 0.7;}
</style>
<div style="height: 100px; overflow: auto">
</div>
</head>
<body>
<form action="#">
<!-- 내비게이션 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
<!--css link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
<body id="page-top">
<!--creating a navigation bar-->
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom-->
<div class="container"><!--gives padding of 16px on LHS and RHS-->
<div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span> Menu <i class="fa fa-bars"></i>
</button>
</div><!--end of button-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
<ul class="nav navbar-nav">
<li><a href="/index.html">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
<li> <a href="/About Us/About Us.html">About Us</a></li>
<li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
<li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
<li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
</ul>
</div><!--end of collapse-->
</div>
</nav>
<!-- 내비게이션 -->
<header>
<h1>Message + EMOJI<span>= Emossage</span></h1>
<p1>Emoti는 이모지 중심 메세지입니다</p1>
<br>
<p2>
<p class="small"> 글자 중 일부가 이모지로 변환됩니다.<br>
여러분만의 이모지 편지를 적어보세요<br> </p2>
</p>
</header>
<div>
<label class="desc" id="title1" for="Field1">Full Name</label>
<div>
<input id="Field1" name="Field1" type="text" class="field text fn" value="" size="8" tabindex="1">
</div>
</div>
<div>
<label class="desc" id="title3" for="Field3">
Email
</label>
<div>
<input id="Field3" name="Field3" type="email" spellcheck="false" value="" maxlength="255" tabindex="3">
</div>
</div>
<div>
<label class="desc" id="title4" for="Field4">
Message
</label>
<div>
<textarea id="Field4" name="Field4" spellcheck="true" rows="10" cols="50" tabindex="4"></textarea>
</div>
<div>
<input id="saveForm" name="saveForm" type="submit" value="Submit">
</div>
</div>
</form>
</body>
......
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 20px 15%;
}
form header {
margin: 0 0 20px 0;
}
form header div {
font-size: 90%;
color: #999;
}
form header h2 {
margin: 0 0 5px 0;
}
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
width: 25%;
float: left;
padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
width: 100%;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
outline: 0;
border-color: #4697e4;
}
@media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label,
legend {
width: 100%;
float: none;
margin: 0 0 5px 0;
}
form > div > div,
form > div > fieldset > div {
width: 100%;
float: none;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select {
width: 100%;
}
}
@media (min-width: 1200px) {
form > div > label,
legend {
text-align: right;
}
}
\ No newline at end of file
window.onload = function() {
// Get the window displayed in the iframe.
var receiver = document.getElementById('receiver').contentWindow;
// Get a reference to the 'Send Message' button.
var btn = document.getElementById('send');
// A function to handle sending messages.
function sendMessage(e) {
// Prevent any default browser behaviour.
e.preventDefault();
// Send a message with the text 'Hello Treehouse!' to the new window.
receiver.postMessage('Hello Treehouse!', 'https://odd-mune.github.io');
}
// Add an event listener that will execute the sendMessage() function
// when the send button is clicked.
btn.addEventListener('click', sendMessage);
}
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
......@@ -117,4 +117,4 @@ let swiper = new Swiper('.swiper-container', {
mousewheel: true,
// Enable debugger
debugger: true,
});
});
\ No newline at end of file
......
......@@ -2,45 +2,40 @@
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="/EMOJI-HUMAN.css">
<link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
</head>
<body style="margin: 0 auto">
<!-- 내비게이션 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
<!--css link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
<body id="page-top">
<!--creating a navigation bar-->
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom-->
<div class="container"><!--gives padding of 16px on LHS and RHS-->
<div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span> Menu <i class="fa fa-bars"></i>
</button>
</div><!--end of button-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
<ul class="nav navbar-nav">
<li><a href="/index.html">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
<li> <a href="/About Us/About Us.html">About Us</a></li>
<li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
<li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
<li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
</ul>
</div><!--end of collapse-->
<link rel="stylesheet" href="="https://odd-mune.github.io/EMOJI-HUMAN//index.css">
<link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
/*
<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>
<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>
<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>
*/
<style>
body {
background-image: url("emojihuman-04.png");
background-repeat: no-repeat;
background-size: 100%;
font-family: Noto Sans KR, regular;
text-align: center;
}
h1 {font-size: 50px;
letter-spacing: 10px;}
p1 {font-size: 24px;}
p2 {font-size: 14px}
p2.small {line-height: 0.7;}
</style>
<div style="height: 100px; overflow: auto">
</div>
</nav>
<!-- 내비게이션 -->
</head>
</body>
\ No newline at end of file
<body>
<h1>Emoji Human,<span> Who are you?</span></h1>
<p1>이모지 인간의 정체가 궁금해요.</p1>
<br>
<p2>
<p class="small"> 이모지일까요, 인간일까요?<br>
직접 대화하면서<br> 차근차근 알아가봅시다! </p2>
</p>
</body>
......
# EMOJI-HUMAN
옥타린 전시회
by:
* 송민겸
* 김유진
\ No newline at end of file
옥타린 전시회
\ No newline at end of file
......
/*-----------배경 그라디언트-----------*/
#gradient-bg{
width: 100%;
height: 100vh;
background: rgb(255, 255, 255);
background-image:
radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(243, 97, 155, 0) 80%),
radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 80%),
radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 40%),
radial-gradient(circle farthest-corner 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) 100%);
animation: colorChange 6s infinite alternate-reverse;
}
@keyframes colorChange {
......@@ -113,390 +113,4 @@
2% { background-image: radial-gradient(circle at top left, rgb(236, 183, 16) 0%, rgba(225, 243, 97,0) 51%),radial-gradient(circle at bottom right, rgb(114, 215, 52) 0%, rgba(204, 104, 119, 0) 51%),radial-gradient(circle at top right, rgb(255, 255, 255) 0%, rgba(155, 221, 240,0) 51%),radial-gradient(ellipse at bottom center, rgb(232, 186, 186) 0%, rgba(254, 43, 0, 0) 51%);}
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%);}
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%);}
}
/*-----------배경 그라디언트-----------*/
:root {
--FACE_WIDTH: 450px;
--FACE_HEIGHT: 450px;
--SHINE_WIDTH: calc(calc(194/230) * var(--FACE_WIDTH));
--SHINE_HEIGHT: calc(calc(206/230) * var(--FACE_HEIGHT));
--EYE_WIDTH: calc(calc(24/230) * var(--FACE_WIDTH));
--EYE_HEIGHT: calc(calc(38/230) * var(--FACE_HEIGHT));
--EYE_LEFT_RIGHT: calc(calc(70/230) * var(--FACE_WIDTH));
--EYE_LEFT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
--EYE_RIGHT_BOTTOM: calc(calc(40/230) * var(--FACE_HEIGHT));
--EYE_RIGHT_LEFT: calc(calc(70/230) * var(--FACE_WIDTH));
--MOUTH_TOP: calc(calc(88/230) * var(--FACE_HEIGHT));
--MOUTH_WIDTH: calc(calc(94/230) * var(--FACE_WIDTH));
--MOUTH_HEIGHT: calc(calc(48/230) * var(--FACE_HEIGHT));
--MOUTH_BEFORE_BOTTOM: calc(calc(10/230) * var(--FACE_HEIGHT));
--MOUTH_AFTER_BOTTOM: calc(calc(26/230) * var(--FACE_HEIGHT));
}
/* 이모지 얼굴 */
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#emoji {
position: relative;
width: var(--FACE_WIDTH);
height: var(--FACE_HEIGHT);
transform: translate3d(0, 0, 0);
}
.layer {
position: absolute;
width: 100%;
height: 100%;
}
.face {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: var(--FACE_WIDTH);
height: var(--FACE_HEIGHT);
background-color: #FECA32;
border-radius: 100%;
box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px;
}
.shine {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: var(--SHINE_WIDTH);
height: var(--SHINE_HEIGHT);
background: linear-gradient(to bottom, #FFFFFF, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0));
border-radius: 100%;
opacity: 0.8;
}
.eye {
width: var(--EYE_WIDTH);
height: var(--EYE_HEIGHT);
background-color: #A1620F;
border-radius: 100%;
box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px, rgba(255, 255, 255, 0.2) 0 2px 0 2px;
-webkit-animation: blink 5s infinite;
animation: blink 5s infinite;
}
.eye.left {
position: absolute;
top: 0;
right: var(--EYE_LEFT_RIGHT);
bottom: var(--EYE_LEFT_BOTTOM);
left: 0;
margin: auto;
}
.eye.right {
position: absolute;
top: 0;
right: 0;
bottom: var(--EYE_RIGHT_BOTTOM);
left: var(--EYE_RIGHT_LEFT);
margin: auto;
}
.mouth {
position: absolute;
top: var(--MOUTH_TOP);
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: hidden;
width: var(--MOUTH_WIDTH);
height: var(--MOUTH_HEIGHT);
transform: translate3d(0, 0, 0);
}
.mouth:before {
position: absolute;
top: 0;
right: 0;
bottom: var(--MOUTH_BEFORE_BOTTOM);
left: 0;
margin: auto;
content: "";
width: 100%;
height: 100%;
background-color: #6E440B;
border-radius: 100%;
box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0;
transform: scale(1);
}
.mouth:after {
position: absolute;
top: 0;
right: 0;
bottom: var(--MOUTH_AFTER_BOTTOM);
left: 0;
margin: auto;
content: "";
width: calc(100% - 20px);
height: 100%;
background-color: #FECA32;
border-radius: 100%;
box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px;
transform-origin: 50% 100%;
transform: scale(1.6);
}
@-webkit-keyframes blink {
0%, 96% {
transform: scaleY(1);
}
98% {
transform: scaleY(0.1);
}
100% {
transform: scaleY(1);
}
}
@keyframes blink {
0%, 96% {
transform: scaleY(1);
}
98% {
transform: scaleY(0.1);
}
100% {
transform: scaleY(1);
}
}
/* 이모지 얼굴 */
/* 내비 */
body {
font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow-x: hidden;
}
.center
{
text-align: center;
}
p
{
font-size: 20px;
}
a,
a:hover,
a:focus,
a:active,{
color: #99CED4;/*hover-highlight over,active-highlisht when clicked,focus-highlight when under use*/
outline: none; /*gives outline to an element*/
}
h2,
h3,
{
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 30px;
}
hr.star-light,
hr.star-primary {
padding: 0; /*no padding,bordor upper 5px text to be avilable in center mac-width of 250 having margin t25 rauto b30 */
border: none;
border-top: solid 5px;
text-align: center;
max-width: 250px;
margin: 25px auto 30px;
}
hr.star-light:after,
hr.star-primary:after {
content: "\f021"; /*give an icon FontAwesome helps to get desired font display inline within full span position*/
font-family: FontAwesome;
display: inline-block;
position: relative;
top: -0.8em;
font-size: 2em;
padding: 0 0.25em;
}
hr.star-light {
border-color: white; /*gives border white*/
}
hr.star-light:after {
background-color: #18BC9C;
color: white;
}
hr.star-primary {
border-color: #2C3E50;
}
hr.star-primary:after {
background-color: white;
color: #2C3E50;
}
header {
text-align: center;
background: #18BC9C;
color: white;
}
header .container {
padding-top: 100px;
padding-bottom: 50px;
}
header .intro .name {
display: block;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
font-size: 2em;
}
header .intro .skills {
font-size: 1.25em;
font-weight: 300;/*how much bold*/
}
@media (min-width: 768px) {/* if minimum width exceeds then perform*/
header .container {
padding-top: 200px;
padding-bottom: 100px;
}
header .intro .name {
font-size: 4.75em;
}
header .intro .skills {
font-size: 1.75em;
}
}
.navbar-custom {
background: #2C3E50;
font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-transform: uppercase;
font-weight: 700;
border: none;
}
}
.navbar-custom .navbar-nav {
letter-spacing: 1px;
}
.navbar-custom .navbar-nav li a {
color: white;
}
.navbar-custom .navbar-nav li a:hover {
color: #18BC9C;
outline: none;
}
.navbar-custom .navbar-nav li a:focus,
.navbar-custom .navbar-nav li a:active {
color: white;
}
.navbar-custom .navbar-nav li.active a {
color: white;
background: #18BC9C;
}
.navbar-custom .navbar-nav li.active a:hover,
.navbar-custom .navbar-nav li.active a:focus,
.navbar-custom .navbar-nav li.active a:active {
color: white;
background: #18BC9C;
}
.navbar-custom .navbar-toggle {
color: white;
text-transform: uppercase;
font-size: 10px;
border-color: white;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
background-color: #18BC9C;
color: white;
border-color: #18BC9C;
}
footer {
color: white;
}
footer h3 {
margin-bottom: 30px;
}
footer .footer-above {
padding-top: 50px;
background-color: #2C3E50;
}
footer .footer-col {
margin-bottom: 50px;
}
footer .footer-below {
padding: 25px 0;
background-color: #233140;
}
/* 내비 */
/* 이모지 레인 */
body{
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background: #000;
font-family: 'Oswald', sans-serif;
}
#text {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
text-align: center;
}
#container {
left: 0px;
top: -100px;
height: calc(100vh + 100px);
overflow: hidden;
position: relative;
}
#animate{
margin: 0 auto;
width: 20px;
overflow: visible;
position: relative;
}
#all{
overflow: hidden;
height: 100vh;
width: 100%;
position: fixed;
}
#footer{
color: #ffc0cb;
text-decoration: none;
position: fixed;
width: 752px;
bottom: 20px;
align-content: center;
float: none;
margin-left: calc(50% - 376px);
}
#a, p{
text-decoration: none;
color: #FFFFFF;
letter-spacing: 6px;
transition: all 0.5s ease-in-out;
width: auto;
margin: 0 auto;
text-align: center;
align-items: center;
}
/* 이모지 레인 */
\ No newline at end of file
}
\ No newline at end of file
......
......@@ -2,93 +2,26 @@
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>EMOJI-HUMAN</title>
<link rel="stylesheet" href="/index.css">
<link rel="icon" type="image/x-icon" href="/src/rainbow_1f308.png">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://odd-mune.github.io/EMOJI-HUMAN/index.css">
<link rel="icon" type="image/x-icon" href="https://odd-mune.github.io/EMOJI-HUMAN/src/rainbow_1f308.png">
</head>
<body style="margin: 0 auto">
<!-- 큰 묶음은 배경임 -->
<body>
<!-- partial:index.partial.html -->
<div id="gradient-bg">
</div>
<!-- partial -->
<script src="https://odd-mune.github.io/EMOJI-HUMAN/index.js"></script>
<!-- 내비게이션 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--bootstrap-->
<!--css link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><!--for icons-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--jquery script-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--bootstrap script-->
<body id="page-top">
<!--creating a navigation bar-->
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top navbar-custom"><!--navigation bar with default view fixed on top specific class nav-bar custom-->
<div class="container"><!--gives padding of 16px on LHS and RHS-->
<div class="navbar-header page-scroll"><!--navigation bar header having proprty to scroll -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span> Menu <i class="fa fa-bars"></i>
</button>
</div><!--end of button-->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!--to collapse-->
<ul class="nav navbar-nav">
<li><a href="/index.html">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right page-scroll"><!--second UL to go to right having proprty to scroll page-->
<li> <a href="/About Us/About Us.html">About Us</a></li>
<li><a href="/EMOJI-HUMAN/EMOJI-HUMAN.html">EMOJI-HUMAN</a></li>
<li><a href="/EMO-TI/EMO-TI.html">EMO-TI</a></li>
<li><a href="/EMO-SSAGE/EMO-SSAGE.html">EMO-SSAGE</a></li>
</ul>
</div>
</div>
</nav>
<!-- 내비게이션 -->
<!-- 이모지 얼굴 -->
<div style="width: 100%; display: flex; justify-content: space-around; margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2;">
<ul id="emoji">
<li class="layer" data-depth="0.2">
<div class="face"></div>
</li>
<li class="layer" data-depth="0.3">
<div class="shine"></div>
</li>
<li class="layer" data-depth="0.8">
<div class="eye left"></div>
</li>
<li class="layer" data-depth="0.8">
<div class="eye right"></div>
</li>
<li class="layer" data-depth="0.8">
<div class="mouth"></div>
</li>
</ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js'></script><script>src="/face.js"></script>
</div>
<!-- 이모지 얼굴 -->
<button id="button1" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/About Us/About Us.html'">About Us</button>
<button id="button2" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMOJI-HUMAN/EMOJI-HUMAN.html'">EMOJI-HUMAN</button>
<button id="button3" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-TI/EMO-TI.html'">EMO-TI</button>
<button id="button4" onclick="document.location='https://odd-mune.github.io/EMOJI-HUMAN/EMO-SSAGE/EMO-SSAGE.html'">EMO-SSAGE</button>
<!-- 이모지 레인 -->
<div style="z-index: 1;">
<link href="https://fonts.googleapis.com/css?family=Oswald:600,700" rel="stylesheet">
<div id="all">
<div id="container">
<div id="animate">
</div>
</div>
</div>
<div id="footer" style="">
<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>
</div>
<br />
<hr />
<script src="/index.js"></script>
</div>
<!-- 이모지 레인 -->
</div>
<script src="/index.js"></script>
<!-- 큰 묶음은 배경임 -->
</body>
\ No newline at end of file
</body>
......
// 배경 그라디언트
//the only purpose of this is to generate the CSS keyframes
var str = 0;
var num = 100;
var porcents = 100;
......@@ -10,76 +11,4 @@ var str = 0;
str = str + i;
num = num - 0.5;
porcents = porcents -1;
}
// 배경 그라디언트
// 이모지 레인
var container = document.getElementById('animate');
var emoji = ['🍹', '🐻', '✌', '🍒', '🥕', '🎸', '🍭', '💖', '🥰', '🎵', '🌏', '🍰', '🎃', '🎅', '🌈', '🌷', '🥳', '🦄', '🍀', '👻', '🌴', '🐬', '🎁'];
var circles = [];
for (var i = 0; i < 15; i++) {
addCircle(i * 150, [10 + 0, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 0, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 - 200, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 200, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 - 400, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 400, 300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 - 600, -300], emoji[Math.floor(Math.random() * emoji.length)]);
addCircle(i * 150, [10 + 600, 300], emoji[Math.floor(Math.random() * emoji.length)]);
}
function addCircle(delay, range, color) {
setTimeout(function() {
var c = new Circle(range[0] + Math.random() * range[1], 80 + Math.random() * 4, color, {
x: -0.15 + Math.random() * 0.3,
y: 1 + Math.random() * 1
}, range);
circles.push(c);
}, delay);
}
function Circle(x, y, c, v, range) {
var _this = this;
this.x = x;
this.y = y;
this.color = c;
this.v = v;
this.range = range;
this.element = document.createElement('span');
/*this.element.style.display = 'block';*/
this.element.style.opacity = 0;
this.element.style.position = 'absolute';
this.element.style.fontSize = '26px';
this.element.style.color = 'hsl('+(Math.random()*360|0)+',80%,50%)';
this.element.innerHTML = c;
container.appendChild(this.element);
this.update = function() {
if (_this.y > 800) {
_this.y = 80 + Math.random() * 4;
_this.x = _this.range[0] + Math.random() * _this.range[1];
}
_this.y += _this.v.y;
_this.x += _this.v.x;
this.element.style.opacity = 1;
this.element.style.transform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
this.element.style.webkitTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
this.element.style.mozTransform = 'translate3d(' + _this.x + 'px, ' + _this.y + 'px, 0px)';
};
}
function animate() {
for (var i in circles) {
circles[i].update();
}
requestAnimationFrame(animate);
}
animate();
// 이모지 레인
\ 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