Learning jQuery

This tutorial will demonstrate how to use CSS, jQuery, and JavaScript to create a really simple and cool text effect where it appears as though there are bubbles forming behind the text. After forming, the bubble float above the text before they disappear. This tutorial was inspired by a code snippet that originally appeared on CodePen.

The HTML

To start creating this effect, first you'll need some HTML. We've included our text in an h1 tag which is wrapped in a div. Check out our code below:

<div class="bubbles">
<h1>Bubble Text!</h1>
</div>

The CSS

Even though jQuery is the most important part of getting the animated bubbles to work for this effect, this snippet would be incomplete without some styling. In the CSS code snippet below, we define things like the background-color, the font-family, and the round shape of the bubbles. Make sure you don't skip this step, but feel free to customize the code to your liking.

body {
background-color: #3498db;
}
.bubbles {
    display: inline-block;
    font-family: arial;
    position: relative;
}
.bubbles h1 {
    position: relative;
    margin: 1em 0 0;
    font-family: 'Lemon/Milk', cursive;
    color: #fff;
    z-index: 2;
}
.individual-bubble {
    position: absolute;
    border-radius: 100%;
    bottom: 10px;
    background-color: #fff;
    z-index: 1;
}

The jQuery

All that's left to create this cool effect is the addition of some jQuery code. The jQuery is very straightforward - we need to create two arrays, one blank one that will determine the positioning of the bubbles, and another that is populated and will help determine the size of each bubble. Then, we'll need to write a function that selects random array elements, and another that generates a new selection every 350 milliseconds. Then we have some code that will append the bubbles to the HTML so that they appear in the viewport, and finally we need a final callback function to remove the bubbles from the viewport, so that a huge collection of bubbles doesn't accumulate at the top of the page. The original author of the aforementioned CodePen snippet annotated the jQuery code very well, so we've left his meticulous notes in the code to help you follow the steps as you read them.

// Created for an Articles on:
// https://www.html5andbeyond.com/bubbling-text-effect-no-canvas-required/
jQuery(document).ready(function($) {
    // Define a blank array for the effect positions. 
    // This will be populated based on width of the title.
    var bArray = [];
    // Define a size array, this will be used to vary bubble sizes
    var sArray = [4, 6, 8, 10];

    // Push the header width values to bArray
    for (var i = 0; i & lt; $('.bubbles').width(); i++) {
        bArray.push(i);
    }

    // Function to select random array element
    // Used within the setInterval a few times
    function randomValue(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
    }
    // setInterval function used to create new bubble every 350 milliseconds
    setInterval(function() {
        // Get a random size, defined as variable so it can be used for 
        // both width and height
        var size = randomValue(sArray);
        // New bubble appeneded to div with it's size and left position being set inline
        // Left value is set through getting a random value from bArray
        var styleElm = 'style="left: ' + randomValue(bArray) + 'px;';
        styleElm = styleElm + 'width: ' + size + 'px; height:' + size + 'px;"';
        $('.bubbles').append('<div class="individual-bubble"' + styleElm + '></div>');

        // Animate each bubble to the top (bottom 100%) and reduce opacity as it moves
        // Callback function used to remove finsihed animations from the page
        $('.individual-bubble').animate({
            'bottom': '100%',
            'opacity': '-=0.7'
        }, 3000, function() {
            $(this).remove()
        });
    }, 350);
});

Now you can experiment with this very cool effect -- customize the speed, size of the bubbles, colors, etc -- and add it to any of your next projects!