Background Animation HTML CSS and Particles JS

byCodingFlicks -November 18, 2021

0

Hello Friends, in this blog, you'll 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. Check out those snippets if you want.

In this project, we have created a background animation using HTML CSS and particles js jquery plugin. First, we have taken a div named 'home-area'. For the banner text, we have taken another div named 'banner-text'. After that, we have placed an h2 tag. Search for particles js jquery plugin and add the particles js and app js files into your project. Also, add the latest jquery file as well.

In the CSS part, we have eliminated the default margin and padding. After that, 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 have to make some adjustments in order to the effect shown in the demo video. We have to change the shape element to 'star'. In addition, we need to change other values such as opacity, size, line_linked, move, and interactivity.

You may like this:

Background Animation using HTML CSS and Particles js [ Source Code ]:

For this project, create one HTML file with a .html extension and one CSS file with a .css extension. Add the plugin files and latest jquery file to your project. Please copy the code below and paste them into your project. If you have any problems, then download the code from the button provided below.

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=Montserrat:wght@700&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="home-area" id="particles-js"></div>
	<div class="banner-text">
		<h2>Animated Background</h2>
	</div>
	<script src="js/jquery-3.2.1.min.js">
	</script> 
	<script src="js/particles.js">
	</script> 
	<script src="js/app.js">
	</script>
</body>
</html>

ADD CSS:

body {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
}
.home-area {
	background: url("https://images.pexels.com/photos/1169754/pexels-photo-1169754.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
	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 {
	text-transform: uppercase;
	font-size: 90px;
}

I hope you have implemented the code successfully. For more snippets, please follow us on our social media profiles 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.