Background Animation HTML CSS and Particles JS

byCodingFlicks -November 18, 2021

0

The importance of animations is essential for creating an intuitive, attractive and dynamic website. They help improve the user experience and provide visual feedback. Animations prevent frustration among users and user feel satisfied after visiting an animated website. Background animations, especially on the homepage of a website, play an important role in setting the mood and grabbing the attention of users. In this blog post, you will learn how to create an animated background using HTML, CSS and JS. We have shared many projects on CSS animation examples, HTML CSS and JavaScript in this website. If you want, check out those snippets. We have added a video tutorial below for your convenience. Check it out before collecting the source code.

Video Tutorial:

We hope you watched the above video tutorial on background animation. A polished video background, especially on a website homepage, helps set the atmosphere and mood of a visitor. For example, a nature background video helps set a calm and organic tone for a spa-type website, while a kinetic shape-type video sets an innovative feel for a technology or software company. We all know that the homepage of any website is the digital storefront of that website. If we want to make an impression in a few seconds, an attractive, high-quality background animation instantly attracts the visitors. It encourages them to explore further. In this project, we created a background animation using HTML CSS and the particles js jquery plugin. First, we took a div called 'home-area'. For the banner text, we took another div called 'banner-text'. After that, we placed an h2 tag. Search for the particles js jquery plugin and add the particles js and app js files to your project. Also, add the latest jquery file.

In the CSS part, we have removed the default margins and padding. Next, we have set a background image and placed the text in the middle of the viewport. To get the animation, we need to add an ID 'particle-js' to the 'home-area' div. In the app js file, we need to make some adjustments to get the effect shown in the video tutorial above. We need to change the shape element to 'star'. Also, we need to change other values like opacity, size, line_linked, move, and interactivity. All of this is shown in the video tutorial above.

You May Also Like:

Background Animation with Particles js [ Source Code ]:

For this project, we need to create an HTML file with .html extension and a CSS file with .css extension. Add the plugin file and the latest jquery file to your project. Please copy the code from the code box below and paste it into your project. If you face any issue, download the code from the download button given at the bottom of this blog post.

ADD HTML:

<!doctype html>
<html lang="en">
<!--codingflicks.com-->
<head>
    <meta charset="UTF-8">
    <title>Background Animation using HTML CSS and Particles js</title>
    <link href="https://fonts.googleapis.com/css2?family=Ephesis&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">    
</head>
<body>
    <div class="home-area" id="particles-js"></div> 

    <div class="banner-text"><h2>Animated Background</h2></div>


    <script src="jquery-3.2.1.min.js"></script>
    <script src="particles.js"></script>
    <script src="app.js"></script>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
	font-family: "Ephesis", serif;
}
.home-area {
	background: url("2.jpg");
	height: 100vh;
	width: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}
.banner-text {
	text-align: center;
	z-index: 1000;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
}
.banner-text h2 {
	font-size: 95px;
	line-height: 1;
	font-weight: 900;
	font-family: ephesis;
}

Animations are important for any website to grab the attention of the users. However, we have to remember that they should complement the main content, never overshadow the text or important CTAs. It should be optimized to load quickly and not slow down the overall page speed. We hope you have successfully implemented the code. For more snippets, please click the load more button on our homepage and stay connected with the blog. Thank you for visiting the blog.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.