Hi guys, I'm back today, To teaching you an amazing and fun project, I hope you help me to completing that into a GitHub repository.
Well, Let's do that and start our project which is a CSS and JavaScript project!
HTML file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation emoji</title>
</head>
<body>
<span class="anim anim-laugh"></span>
<script src="./lib/animoji.js"></script>
<link rel="stylesheet" href="./lib/animoji.css">
</body>
</html>
JavaScript file
To add different part of our character into HTML tag we need some JavaScript codes:
window.onload = function() {
main();
}
function main() {
let laugh = document.querySelectorAll(".anim.anim-laugh");
laugh.forEach(element => createLaughEmoji(element));
}
function createLaughEmoji(element) {
var circle = createElementWithClass("span", "circle");
var semiCircle = createElementWithClass("span", "semi-circle");
var foursquare = createElementWithClass("span", "foursquare");
var closeEyeLeft = createElementWithClass("span", "eye-left");
var closeEyeRight = createElementWithClass("span", "eye-right");
var eyeDiv = createElementWithClass("span", "eye-div");
eyeDiv.append(closeEyeLeft);
eyeDiv.append(closeEyeRight);
semiCircle.append(foursquare);
element.append(circle);
element.append(semiCircle);
element.append(eyeDiv);
}
function createElementWithClass(tag, className) {
var element = document.createElement(tag);
element.classList.add(className);
return element;
}
CSS file
After adding our character parts into the HTML tag we are going to add CSS styles and animation, To animating our character:
.anim {
display: block;
width: 200px;
height: 200px;
min-width: 20px;
min-height: 20px;
}
.anim span {
display: block;
position: relative;
}
.circle {
width: 100%;
height: 100%;
border-radius: 100%;
background-color: rgb(255, 235, 191);
}
.semi-circle {
width: 60%;
height: 30%;
border-radius: 0 0 150px 150px;
background-color: rgb(247, 170, 134);
margin: -40% auto 0;
overflow: hidden;
}
.foursquare {
width: 100%;
height: 30%;
background-color: #fff;
}
.eye-right {
min-width: 10%;
width: 10%;
height: 10%;
background: rgb(65, 65, 65);
margin: 0% 0 0;
border-radius: 100%;
}
.eye-left {
min-width: 10%;
width: 10%;
height: 10%;
background: rgb(65, 65, 65);
margin: 0% 0 0;
border-radius: 100%;
}
.eye-div {
width: 100%;
height: 100%;
margin: -60% 0 0;
display: flex!important;
flex-wrap: nowrap;
justify-content: space-around;
}
.anim-laugh .eye-div {
animation: 3s infinite laugh-eyes;
}
.anim-laugh .eye-right, .anim-laugh .eye-left {
border-radius: 150px 150px 0 0;
background: none;
border: 2px solid rgb(65, 65, 65);
border-bottom: none;
min-width: 20%;
width: 20%;
height: 10%;
}
.anim-laugh .semi-circle {
animation: 3s infinite laugh-mouth;
}
@keyframes laugh-eyes {
0% {
width: 100%;
margin: -50% 0 0;
transform: rotateZ(0deg);
}
25% {
width: 60%;
margin: -50% 10% 0;
transform: rotateZ(-10deg);
}
50% {
width: 100%;
margin: -50% 0 0;
transform: rotateZ(0deg);
}
75% {
width: 60%;
margin: -50% 30% 0;
transform: rotateZ(10deg);
}
100% {
width: 100%;
margin: -50% 0 0;
transform: rotateZ(0deg);
}
}
@keyframes laugh-mouth {
0% {
margin: -40% 20% 0;
transform: rotateZ(0deg);
}
25% {
margin: -60% 15% 0;
transform: rotateZ(-10deg);
}
50% {
margin: -40% 20% 0;
transform: rotateZ(0deg);
}
75% {
margin: -60% 25% 0;
transform: rotateZ(10deg);
}
100% {
margin: -40% 20% 0;
transform: rotateZ(0deg);
}
}
Preview
Oldest comments (0)