Animated Background using Vanilla JavaScript

Nowadays we come across many websites that have dynamic visual effects or movement in the background. This type of animation is called background animation. Trendy websites add this type of animation to add interactivity, depth, and visual appeal to their designs. Today we will create an animated background using HTML CSS and vanilla JavaScript that can be used as a website's homepage background. Below is the video link to our YouTube channel. If you want to see the step-by-step process of creating this snippet, you can watch the video.

Video Tutorial:

Hope you've seen the tutorial on creating background animations with vanilla JavaScript. Background animations are commonly used to draw attention to content, enhancing storytelling. Nowadays many landing page websites, portfolio websites, brand websites, entertainment websites, educational websites, e-commerce websites, etc. use different types of background animations. Reasons for using background animation are to captivate the audience, showcase creative work, highlight products and promotions, etc. Google, NASA, Coca-Cola, Adidas, Apple, and many other famous companies use background animation to attract visitors.

The background animation we created today is a particle effect. Particles originate in the lower right and disappear in the upper left. It will be less intense in the beginning and increase in intensity over time. The snippet uses vanilla JavaScript with HTML and CSS. We all know that vanilla JavaScript is plain JavaScript without any additional libraries or frameworks. Some of the reasons for its popularity are lightweight, flexibility, compatibility, better performance, etc.

You May Also Like:

Animated Background using Vanilla JavaScript [ Source Code ]:

To create this snippet you need to create an HTML, CSS, and a JS file like in the video tutorial above. After that copy the code from the code box below and paste it into your files. Save the code and test the code in your browser. If the code doesn't work, you can download it from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
    <!-- divinectorweb.com -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Abstract Animation Vanilla Javascript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h2>Animated background</h2>

    <div class="wrapper">
        <div class="boxes"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
        const particleContainer = document.querySelector('.boxes');

        const createParticle = () => {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * window.innerWidth + 'px';
            particle.style.top = Math.random() * window.innerHeight + 'px';
            particle.style.animationDuration = Math.random() * 2 + 1 + 's';
            particleContainer.appendChild(particle);

            particle.addEventListener('animationend', () => {
            particle.remove();
            });
        };

        const spawnParticles = () => {
            setInterval(createParticle, 500);
        };

        spawnParticles();
        });
    </script>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	background: #000;
}
.wrapper {
	overflow: hidden;
	background: #000;
}
h2 {
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: bebas neue;
	font-size: 65px;
	z-index: 1000;
	text-align: center;
}
.boxes {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.particle {
	position: fixed;
	width: 10px;
	height: 10px;
	background-color: deepskyblue;
	animation: moveParticle linear infinite;
	pointer-events: none;
}
@keyframes moveParticle {
	0% {
		transform: translateY(0) translateX(0);
		opacity: 1;
	}
	100% {
		transform: translateY(-100vh) translateX(calc(-100vw + 100%));
		opacity: 0;
	}
}

We hope the code works for you. We hope you like this background animation made with lightweight and flexible vanilla JavaScript. Our website has many code snippets related to background animations, complete website design, JavaScript projects, CSS animations, etc. To get those codes you need to go to our homepage and click on the load more button below. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Animated Background using Vanilla JavaScript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Animated Background using Vanilla JavaScript

Video Tutorial:

Animated Background using Vanilla JavaScript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form