Live Animation Project Using JavaScript

Hello Readers,

Today in this blog you’ll learn how to create live animation project using JavaScript. Previously I have shared a Transparent menu bar using JavaScript now it’s time to create a live animation project using JavaScript, HTML, CSS.

In that tutorial you have seen live animation project using JavaScript. I used the CSS for styling, JavaScript for effect.

If you’re a beginner, you can also create this types of live animation project and good them according to your choice because there are no vast codes of JavaScript.

You might like this:

If you like this program (Custom Design) and want to get source code. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html>
    <head>
        <title> My First Project|Live Animation</title>
        <link rel="stylesheet" href="project2.css">
    </head>
    <body>
        <div class="main">
            <div class="navbar">
                <nav>
                    <div class="logo">
                        <img src="images/logo.png">
                    </div>
                    <div class="nav-link">
                        <ul>
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">About</a></li>
                        </ul>
                    </div>
                    <div class="menu-icon">
                        <img src="images/menu.png">
                    </div>
                </nav>
            </div>
            <div class="content">
                <div class="social-icon">
                    <img src="images/instagram.png">
                    <img src="images/facebook.png">
                    <img src="images/twitter.png">
                    <img src="images/youtube.png">
                </div>
                <div class="search-box">
                    <input type="text" placeholder="Search">
                    <img src="images/search.png">
                </div>
            </div>
        <img src="images/cloud.png" id="clouods">
        <img src="images/plane.png" id="airplane">
        <div id="hotair">
            <img src="images/balloon.png" class="balloan1">
            <img src="images/balloon.png" class="balloan2">
            <img src="images/balloon.png" class="balloan3">
        </div>
        <img src="images/pause.png" id="myimg">
        </div>
        <script>
            var myimg= document.getElementById("myimg");
            myimg.onclick=function(){
                if(clouods.style.webkitAnimationPlayState == "paused")
                {
                    clouods.style.webkitAnimationPlayState ="running"; 
                    airplane.style.webkitAnimationPlayState ="running";
                    hotair.style.webkitAnimationPlayState ="running";
                    myimg.src='images/pause.png';
                }
                else{
                    clouods.style.webkitAnimationPlayState ="paused"; 
                    airplane.style.webkitAnimationPlayState ="paused";
                    hotair.style.webkitAnimationPlayState ="paused";
                    myimg.src='images/play.png';

                }
            }

        </script>
    </body>
</html>
/** code by CodeitHub ( https://CodeitHub.com ) **/
*{
    margin: 0;
    padding:0 ;
    font-family: sans-serif;
}
.main{
    height: 100vh;
    background:linear-gradient(#21b3e1,#fff);
    overflow: hidden;
    position: relative;

}
.navbar{
    width: 100%;
    border-bottom: 1px solid #b7e7f6;
}
nav{
    width: 80%;
    margin:20px auto 0;
    display: flex;
    text-align: center;
    position:sticky;
    z-index:2;
}
.logo{
    flex-basis: 15%;
}
.logo img{
    width: 100px;
}
.nav-link{
    flex:1;
    text-align: center;
}
.nav-link ul li{
    display:inline-block;
    list-style-type:none;
    padding:15px 5px;
    margin:0 25px;
    position:relative;
}
.nav-link ul li a{
    text-decoration:none;
    color:#b7e7f6;
}
.nav-link ul li::after{
    content: '';
    width:100%;
    height:3px;
    background:transparent;
    position: absolute;
    bottom:0;
    left:0;
}
.nav-link ul li:hover::after{
    background: #fff;

}
.active::after{
    background:#fff; 
}
.menu-icon{
    flex-basis: 15%;
}
.menu-icon img{
    width: 35px;
    float: right;
}
.content{
    width:300px;
    position: absolute;
    top:90px;
    left:50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
}
.social-icon img{
    width:18px;
    margin:0 10px;
    cursor: pointer;
}
.search-box{
    margin-top: 20px;
    border:1px solid #b7e7f6;
    border-radius: 30px;
    display:flex;
    align-items:center;
    background:linear-
    gradient(rgba(255,255,255,.2),rgba(255,255,255,.2));
}
.search-box input{
    width: 100%;
    padding:7px;
    border-radius: 30px;
    border:0;
    outline: none;
    background:transparent;
    color: #b7e7f6;
}
::placeholder{
    color:#fff;
}
.search-box img{
    width: 20px;
    margin:5px 10px;
}
#clouods{
    width: 100%;
    position: absolute;
    left:0;
    top:-100px;
    animation: clouds 5s linear infinite;
}
@keyframes clouds{
    0%{
        top:-100px;
    }
    20%{
        top:100px;
    }
    80%{
        top:100px;
    }
    100%{
        top:-100px;
    }
}
#airplane{
    width: 200px;
    position: absolute;
    top:180px;
    left: -250px;
    z-index: 2;
    animation: fly 5s linear infinite;
}
@keyframes fly{
    0%{
        left: -250px;
    }
    20%{
        left: 250px;
    }
    80%{
        left: 250px;
    }
    100%{
        left: 110%;
    }
}
#hotair{
    height: 400px;
    width: 700px;
    position: absolute;
    bottom:-450px;
    left:50%;
    transform: translateX(-50%);
    animation: hotair 5s linear infinite;
}
@keyframes hotair{
    0%{
        bottom:-450px;
    }
    20%{
        bottom:100px;
    }
    80%{
        bottom:100px;
    }
    100%{
        bottom:-450px;
    }
}
 .balloan1{
    width: 150px;
    opacity:0.4;
}
.balloan2{
    width: 350px;

}
.balloan3{
    width: 180px;
    opacity:0.6;
}
#myimg{
    width: 70px;
    height: 70px;
    position: absolute;
    bottom:30px;
    left:50%;
    transform: translateX(-50%);
    cursor: pointer;
}

Output

Leave a Reply

Your email address will not be published. Required fields are marked *