Background Animation using HTML CSS JS

Hello Friends, Welcome to today's blog. Here comes another snippet of background animation. Previous background animation snippets were created with just HTML and CSS. In this project, we have used JavaScript along with HTML and CSS. Have a look at the video tutorial below before collecting the code. This will help you understand your project. We have many videos on frontend development on our youtube channel. The videos may become helpful for you if you are new to front-end development. If you would like, you can subscribe to our channel.

I hope you have seen the video. This animation is like a wave animation that starts from the center and expands to fade out. This snippet uses JavaScript framework jQuery for continuous or repeated animation. It is not possible to write the full description so check out the step-by-step process in the above video.

You may also like:

Background Animation HTML CSS JS [ Source Code ]:

Create an HTML and a CSS File and link the external CSS file with the HTML file. Copy the code from the code boxes and paste them into your project.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<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>background animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        
        <div class="box"></div>
        
    </div>
    <div class="content">
        <h2>animation</h2>
    </div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
        $(function() {
            $X = $('.box');
            for( var i = 0; i < 4; i++) {
                $('.container').append($X.clone()); 
            }
        });
    </script>    
</body>
</html>

ADD CSS:

html, body {
	width: 100%;
	height: 100%;
	background: #262626;
	overflow: hidden;
}

  .box {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
    animation: animate 5s infinite linear;
	background: radial-gradient(#799F0C, #FFE000);
	border-radius: 100%;
}

.content h2{
    display: grid;
    place-items: center;
    margin: 0;
    height: 100vh;
    -webkit-text-fill-color: transparent;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #fff;
	font-family: montserrat;
	font-size: 130px;
    text-transform: uppercase;
    z-index: 1000;
}

  
  .box:nth-child(1) {
    animation-delay: -1s;
  }
  
  .box:nth-child(2) {
    animation-delay: -2s;
  }
  
  .box:nth-child(3) {
    animation-delay: -3s;
  }
  
  .box:nth-child(4) {
    animation-delay: -4s;
  }
  
  .box:nth-child(5) {
    animation-delay: -5s;
  }
  
  @keyframes animate {
    0% {
      opacity: 0;
      transform: scale(0);
    }
    1% {
      opacity: 0.10;
    }
    100% {
      opacity: 0;
      transform: scale(2);
    }
  }

I'm sure the code is working well. We've added a load more button at the bottom of our website's homepage. It allows you to get more such code samples. Thank you for visiting our site.

Background Animation HTML CSS JS [ Source Code ]:

1 Comments

Post a Comment

About Us

Contact Form

Background Animation using HTML CSS JS

Background Animation HTML CSS JS [ Source Code ]:

You might like

1 Comments

Post a Comment

Contact Form