JavaScript bubbles effect with source code

JavaScript bubbles effect is effects that mirror or look like the water bubbles effect. This effect can be used in website page backgrounds, login forms, etc. these bubble effect is created with JavaScript.

JavaScript bubbles effect with source code
JavaScript bubbles effect with source code image

JavaScript bubbles effect with source code

Table of content

  1. About the JavaScript bubbles effect
  2. Features of JavaScript bubbles effect
  3. Script includes
  4. Requirements
  5. Step by step to create a JavaScript bubble effect
  6. How to download and extract the source code

About the JavaScript bubbles effect

JavaScript bubbles effect is effects that mirror or look like the water bubbles effect. This effect can be used in website page backgrounds, login forms, etc. these bubble effect is created with JavaScript.

Learn how to create a bubbles effect using JavaScript, html and CSS. This adds bubbles to the background of the page making them look like the effect in the gif below. A zipped source code file is provided below this article if you wish to download it. View source code below.

Features of JavaScript bubbles effect

  1. bubbles effect
  2. Good interface
  3. Easy code Documentation

Script Includes          

  1. JavaScript
  2. HTML
  3. CSS

Requirements

  1. Browser (Chrome or any other browser).
  2. Code Editor (Visual studio code, etc).

Step by step to create a JavaScript bubble effect

  1. Create a new folder and to store created files.
  2. Open your code editor.
  3. Create a file named index.html inside the folder we created earlier.
  4. Copy the HTML codes below and paste it into the Index.html.

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" ></script>
    <title>Javascript Bubble Effect</title>
</head>
<body>

</body>
</html>
  1. Then, create another CSS file called style.css
  2. Copy the code below and paste it into the style.css file.

STYLE.CSS

body {
    width: 100%;
    height: 100%;
    background-color: #e9effa;
    overflow: hidden;
}
span {
    width: 90px;
    border-radius: 50%;
    top: 100%;
    aspect-ratio: 1;
    box-shadow: inset 4px 4px .5rem #011a3f ,inset -1px -1px .5rem #ffffff;
    position: absolute;  
    animation: to_top linear;
    
}

@keyframes to_top {
    from { top: 100%; }
    to { top: -10%; }
}
  1. We also create another file called script.js.
  2. Copy the JavaScript code below and paste it into the script.js file. This JavaScript code gives it the bubbles effect.

SCRIPT.JS

// JavaScript code
1.	setInterval(() => {
2.	     
3.	    const demo = document.createElement('span')
4.	
5.	    demo.style.width = `${Math.floor(Math.random() * 100 + 50)}px`
6.	    demo.style.left = `${Math.floor(Math.random() * screen.width)}px`
7.	    demo.style.animationDuration = `${Math.floor(Math.random() * 5000 + 3000)}ms`
8.	
9.	    document.body.append(demo)
10.	}, 1000)
  1. Save the code.
  2. After saving (ctrl + s) all the code, open any browser and open the html file or double click on the index.html file. A screen like the one in the image below will show. You can edit the bubble color, speed and size inside your code editor.

How to download and Extract source code

The zipped source code is attached below this post.

  1. Scroll down to the attached zipped file.
  2. Click on it once to start downloading; this will prompt its download.
  3. Go to your downloads folder in your pc.
  4. Extract/unzip the script folder.
  5. After extracting run the index.html file. It will open in your browser.
  6. You can edit in code editor.

Screenshot

Files