Animated Bubbles with Vanilla JavaScript

Any motion or dynamic visual effect that occurs in the background layer of any website or app design is usually called background animation. Some of these are slowly moving gradients, interactive particle effects, or flowing waves, animated bubbles, etc. One of the major functions of background animations is that they can increase the visual appeal of any website. Also, background animation can make the website more memorable. Today, we have created an animated bubbles background animation snippet with HTML, CSS, and vanilla JavaScript, the code of which I will share with you. The process of creating this JavaScript project is presented in video form below. If you wish, watch the video tutorial below.

Video Tutorial:

We hope you enjoyed this tutorial on creating a background animation using HTML, CSS and vanilla JavaScript. Nowadays, users are faced with hundreds of websites every day for various purposes. A beautiful animation, especially on the background of the homepage, which is known as the gateway to a website, can help to make your site stand out and create an emotional impact. Background animation can also help to establish a modern, polished look for your site that also feels alive and responsive.

The visual animation we created today will have multiple bubbles floating around the screen. In this animation, 50 bubbles of different sizes are created after the page loads and are randomly positioned across the screen. CSS animation is used to make the bubbles move continuously. This background animation can be used to add light, dynamic, and decorative visuals to any webpage.

You May Also Like:

- Responsive Resume Website

- Login and Signup Form Switch

Animated Bubbles with Vanilla JavaScript [ Source Code ]:

To create this snippet, you need to create an HTML, a CSS, and a JS file. Then, copy the code from the code box below and paste it into those files. Test the code in your favorite browser. You can also download the code by clicking the download button below this blog post.

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>Animated background using HTML CSS and Vanilla Javascript</title>
    <link href="https://fonts.googleapis.com/css2?family=Protest+Revolution&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <h2>Background Animation</h2>
    <div class="bubbles" id="bubbles"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
	const ani = document.getElementById('bubbles');
	const nums = 50;
	for (let i = 0; i < nums; i++) {
		createBubble(); 
	}

	function createBubble() {
		const bubble = document.createElement('div');
		bubble.classList.add('bubble');
		ani.appendChild(bubble);
		const size = Math.random() * 20 + 5;
		bubble.style.width = `${size}px`;
		bubble.style.height = `${size}px`;
		const xPos = Math.random() * window.innerWidth;
		const yPos = Math.random() * window.innerHeight;
		bubble.style.left = `${xPos}px`;
		bubble.style.top = `${yPos}px`;
		const duration = Math.random() * 8 + 4;
		bubble.style.animation = `moveBubbles ${duration}s linear infinite`;
		const delay = Math.random() * duration;
		bubble.style.animationDelay = `-${delay}s`;
	}
});
    </script>
</body>
</html>

ADD CSS:

body, html {
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
	background: #000; 
}
h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "Protest Revolution", sans-serif;
	color: #fff;
	font-size: 80px;
	margin: 0;
	z-index: 10;
	text-align: center;
	width: 100%;
}
.bubble {
	position: absolute;
	background-color: rgba(0, 255, 255, 0.7);
	width: 5px;
	height: 5px;
	border-radius: 50%;
}
@keyframes moveBubbles {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-300%);
	}
	100% {
		transform: translateY(0);
	}
}

We should also remember that these types of background animations should be used with caution. Excessive use can slow down the speed of the website. Also, using more than one can confuse the users. What we need to do is to balance performance with experience. Hope you have collected the code. To get more such codes, click the Load More button at the bottom of our homepage. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Animated Bubbles with Vanilla JavaScript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Animated Bubbles with Vanilla JavaScript

Video Tutorial:

Animated Bubbles with Vanilla JavaScript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form