Related Articles

Related Articles

How to make bubble background using HTML5 and CSS3?
  • Last Updated : 16 Sep, 2020

Water bubble background animation can easily be generated by using HTML, CSS JavaScript. By using HTML5 we will design the basic body part of the page and by CSS3 we will make the bubbles in the background, And with the help of JavaScript, it will move over the whole page from bottom to up.

Approch:

The basic idea is to create a section using <lspan> element, give it a round shape then by using the CSS animation property translateY the bubble can be moved bottom to top along the Y-axis. The following steps can be followed to obtain the desired result. Create the body by using simple HTML tags.

Make a section in the body tag and then write something which will show in the body of the page.

  • HTML code: In this section, we will design a simple body structure:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <body>
            <section>
                <h2>GeeksforGeeks</h2>
            </section>
        </body>
    </html>

    chevron_right

    
    

  • CSS Part: By using CSS we can make the bubbles in the background. First of all, we fixed the body part with margin, padding, and font style. Then we will try to fix the background and use some attributes like position, height, width, background color, text position, etc. Then we will try to make the bubbles in the background. As it’s a kinda hover effect so we will use span and span:before to fix the position of the bubble, then we will fix the background as transparent and give some border as it show like water bubble, then we have to add some animation like “animate 4s linear-gradient” to animate it. And the last of the CSS part we will use @Keyframes animation to move the bubbles along y-axis.



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: consolas;
        }
        section {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background: #111;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        section h2 {
            font-size: 10em;
            color: #333;
        }
        section span {
            position: absolute;
            bottom: -50px;
            background: transparent;
            border-radius: 50%;
      
            pointer-events: none;
            box-shadow: inset 0 0 10px rgba(225, 225, 225, 0.5);
            animation: animate 4s linear infinite;
        }
        sectionspan: before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            transform: scale(0.25) translate(-70%, -70%);
            background: radial-gradient(#ffffff, transparent);
            border-radius: 50%;
        }
        @keyframes animation {
            0% {
                transform: translateY(0%);
                opacity: 1;
            }
            99% {
                opacity: 1;
            }
            100% {
                transform: translateY(-1200%);
                opacity: ;
            }
        }
    </style>

    chevron_right

    
    

  • JavaScript:

    At the last we use JavaScript to move the bubbles from bottom to top off the page. And it will give a charming and look like alive. We will take create a function named to create a bubble and write some code. we will give it animation and set the timing and at the last, we will add setInterval(createBubble, 100) as the bubbles can move from bottom to top. If we don’t add this the bubble will generate at the bottom part of the page but don’t move to the top but to be continued to generate.

    JavaSript Code: here we will see how to move the bubbles:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script type="text/javascript">
        function createBubble() {
            const section = document.querySelector("Section");
            const createElement = document.createElement("span");
            var size = Math.random() * 60;
      
            createElement.style.animation = 
              "animation 6s linear infinite";
            createElement.style.width = 180 + size + "px";
            createElement.style.height = 180 + size + "px";
            createElement.style.left = 
              Math.random() * innerWidth + "px";
            section.appendChild(createElement);
      
            setTimeout(() => {
                createElement.remove();
            }, 4000);
        }
        setInterval(createBubble, 100);
    </script>

    chevron_right

    
    

Complete Code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" 
              content="width=device-width,
                       initial-scale=0.1" />
        <style>
            * {
                margin: 0;
                padding: 0;
                font-family: consolas;
            }
            section {
                position: relative;
                width: 100%;
                height: 100vh;
                overflow: hidden;
                background: #111;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            section h2 {
                font-size: 10em;
                color: #333;
            }
            section span {
                position: absolute;
                bottom: -50px;
                background: transparent;
                border-radius: 50%;
  
                pointer-events: none;
                box-shadow: inset 0 0 10px 
                  rgba(225, 225, 225, 0.5);
                animation: animate 4s linear infinite;
            }
            sectionspan: before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                transform: scale(0.25) translate(-70%, -70%);
                background: 
                  radial-gradient(#ffffff, transparent);
                border-radius: 50%;
            }
            @keyframes animation {
                0% {
                    transform: translateY(0%);
                    opacity: 1;
                }
                99% {
                    opacity: 1;
                }
                100% {
                    transform: translateY(-1200%);
                    opacity: ;
                }
            }
        </style>
    </head>
    <body>
        <section>
            <h2>GeeksforGeeks</h2>
        </section>
        <script type="text/javascript">
            function createBubble() {
                const section = 
                      document.querySelector("Section");
                const createElement = 
                      document.createElement("span");
                var size = Math.random() * 60;
  
                createElement.style.animation = 
                  "animation 6s linear infinite";
                createElement.style.width = 180 + size + "px";
                createElement.style.height = 180 + size + "px";
                createElement.style.left = 
                  Math.random() * innerWidth + "px";
                section.appendChild(createElement);
  
                setTimeout(() => {
                    createElement.remove();
                }, 4000);
            }
            setInterval(createBubble, 100);
        </script>
    </body>
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :