like animation using html css and js with source code

Likes Animation using Animate.css Library – Coding Torque

Share your love

Hello Guys! Welcome to Coding Torque. In this blog, I’m going to explain to you how to make Likes Animation using Animate.css Library. This will be a step-by-step guide. Let’s get started 🚀.

Before we start, here are some JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

 

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <title>Like animation using animate.css - @code.scientist</title>
</head>

<body>
      <!-- Further code here -->
</body>

</html>

Paste the below code in your <body> tag

<h1 class="animated bounceInDown">Animations</h1>
<h2 class="animated bounceIn">with Animate.css</h2>

<div id="animation-container"></div>
<button id="animation-button" class="animated fadeInUp"><i class="fas fa-thumbs-up"></i></button>

<div id="footer" class="animated zoomIn">
    <i class="fas fa-code animated swing infinite"></i>with<i
        class="fas fa-heart animated pulse infinite"></i>by<a href="#">Coding Journey</a>
</div>

Output Till Now

CSS Code 

Create a file style.css and paste the code below.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: "Roboto", sans-serif;
    color: #333;
    text-align: center;
    overflow-x: hidden;
}

a {
    color: #336699;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #23527c;
    text-decoration: underline;
}

h1,
h2 {
    font-weight: 100;
    letter-spacing: 2px;
}

h1 {
    font-size: 38px;
    margin: 40px 0 10px 0;
}

h2 {
    font-size: 26px;
    margin: 10px 0;
}

h2.animated {
    animation-delay: 1s;
    /* animation-iteration-count: infinite;
animation-duration: 0.5s; */
}

#animation-container {
    position: relative;
    height: 50vh;
    width: 50vw;
    margin: 30px auto;
    /* border: 1px solid #333; */
    overflow: hidden;
}

.animated-icon {
    position: absolute;
    color: #333;
    font-size: 50px;
}

#animation-button {
    display: block;
    margin: 0 auto;
    font-size: 30px;
    height: 80px;
    width: 80px;
    color: #fff;
    background-color: rgba(51, 51, 51, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.075);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    transition: all 0.3s;
    animation-delay: 1.5s;
}

#animation-button:hover {
    background-color: rgba(51, 51, 51, 0.85);
}

#animation-button:active {
    background-color: rgba(51, 51, 51, 1);
}

#footer {
    font-size: 18px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 25px;
    animation-delay: 1.5s;
}

#footer i,
#footer a {
    font-size: 20px;
    margin: 0 8px;
}

#footer a {
    font-style: italic;
    font-weight: 600;
}

#footer .fa-code {
    color: #336699;
}

#footer .fa-heart {
    color: #ff3333;
}

@media (max-width: 767px) {
    h1 {
        font-size: 30px;
        margin: 25px 0 10px 0;
    }

    h2 {
        font-size: 18px;
    }

    #animation-container {
        height: 50vh;
        width: 70vw;
    }

    #animation-button {
        font-size: 26px;
        width: 70px;
        height: 70px;
    }

    .animated-icon {
        font-size: 40px;
    }

    #footer {
        font-size: 16px;
        padding: 20px;
    }

    #footer i,
    #footer a {
        font-size: 18px;
    }
}

@media (max-height: 639px) {
    #footer {
        position: static;
        padding-bottom: 10px;
    }
}

 

Output Till Now

like animation using html css and js with source code

JavaScript Code 

Create a file script.js and paste the code below.
// Global Variables
const animationContainer = document.getElementById("animation-container");
const animationButton = document.getElementById("animation-button");
const animationEntrancesArray = ["bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp", "fadeIn", "fadeInDown", "fadeInLeft", "fadeInRight", "fadeInUp", "flipInX", "flipInY", "lightSpeedIn", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "slideInUp", "slideInLeft", "slideInRight", "slideInDown", "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp"];
const colorsArray = ["#ff6384", "#36a2eb", "#ffce56", "#4bc0c0", "#9966ff", "#ff9f40", "#333333", "#ff99cc", "#004c99", "#999900"];
let colorsArrayIndex = 0;

// Event Listeners
animationButton.addEventListener("click", animationButtonClick);

function animationButtonClick(event) {
    const animationContainerWidth = animationContainer.clientWidth;
    const animationContainerHeight = animationContainer.clientHeight;
    const animatedIconFontSize = window.innerWidth < 767 ? 40 : 50;

    const xPosRand = Math.floor(Math.random() * (animationContainerWidth - animatedIconFontSize));
    const yPosRand = Math.floor(Math.random() * (animationContainerHeight - animatedIconFontSize));

    const animationEntrance = animationEntrancesArray[Math.floor(Math.random() * animationEntrancesArray.length)];

    const newElement = document.createElement("i");
    newElement.classList.add("fas", "fa-thumbs-up", "animated-icon", "animated", animationEntrance);
    newElement.setAttribute("style", `left:${xPosRand}px; top:${yPosRand}px; color: ${colorsArray[colorsArrayIndex]};`);
    colorsArrayIndex = (colorsArrayIndex + 1) % colorsArray.length;

    animationContainer.appendChild(newElement);

    setTimeout(() => {
        newElement.classList.remove(animationEntrance);
        newElement.classList.add("zoomOut");
        setTimeout(() => {
            newElement.remove();
        }, 1000);
    }, 1500);
}

 

Written by: Piyush Patil
Code Credits: @Coding_Journey
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖
Share your love

Related Posts