Animated emojis for web #first_one

#css #html #github #tutorial

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);
    }
}