Add some levity to your page with simulated carbonation bubbles using HTML, CSS, and JavaScript. The “bubbles” are built on the page using an unordered list <ul>
, styled with CSS animations, and randomized with JavaScript. The JavaScript could be left out and the elements hand coded on to the page, though this will reduce ease of maintenance and tightness of the code.
To begin, decide where on your page you would like your fizzy block to live. Ours will live in the header at the top of our page, a page where a user would be able to search for a nearby watering hole and check it’s reviews.
Beer Bound!
“The Only Drinking Buddy You’ll Ever Need!”
The CSS creates the bubbles’ animation using keyframes and animation delays. The JavaScript randomizes the location of the bubbles and how often and how quickly the bubbles will rise.
<style>
.jumbotron {
font-family: calangorevi;
text-align: center;
padding: 20px;
border: 5px solid rgba(236, 137, 7, 0.856);
border-radius: 20px;
background-color: rgba(247, 230, 2, 0.856);
font-size: 4rem !important;
margin-top: 2rem;
margin-bottom: 1rem;
overflow: hidden;
height: 200px;
}
.display-4 {
font-size: 4.5rem;
font-weight: 300;
line-height: 1.2;
}
.lead {
font-size: 1.25rem;
font-weight: 300;
}
#bubbles {
position: relative;
top: 0;
left: -100px;
width: 100%;
height: 100%;
transform: translateZ(0);
}
#bubbles li {
display: block;
position: absolute;
list-style: none;
background-color: white;
border: 1px solid rgba(247, 230, 2, 0.856);
animation: square 20s infinite;
transition-timing-function: linear;
margin-top: 36px;
opacity: 0.8;
border-radius: 200px;
width: 5px;
height: 5px;
}
@keyframes square {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(-900px) rotate(630deg);
transform: translateY(-900px) rotate(630deg);
}
}
</style>
The JavaScript is set to randomize between 10 and 26 bubbles. Bubble duration is set to be between 5 and 10 seconds, if set too low, the bubbles will rocket up. The delay between the animations for each individual bubble is set to between 1 and 10 seconds. This is meant for an amusing aspect and not to be distracting.
document.addEventListener("DOMContentLoaded", () => {
var bubblecount = Math.floor(Math.random() * (26 - 10 + 1) ) + 10;
var ul = document.getElementById("bubbles");
for (let i=0; i < bubblecount; i++) {
var li = document.createElement("li");
var bubblepos = Math.floor(Math.random() * (100));
bubbledelay = Math.floor(Math.random() * (10));
bubbleduration = Math.floor(Math.random() * (10 - 5 + 1) + 10););
bubblepos = String(bubblepos) + "%";
bubbledelay = String(bubbledelay) + "s";
bubbleduration = String(bubbleduration) + "s";
li.setAttribute("id", "bubble" + i);
ul.appendChild(li);
document.getElementById("bubble" + i).style.left = bubblepos;
document.getElementById("bubble" + i).style.animationDelay = bubbledelay;
document.getElementById("bubble" + i).style.animationDuration = bubbleduration;
}
});
Changing the bubbles height and width of the <li> elements will change the size of the bubbles. Changing the height and width to the same value makes this a useful snippet to add different size dots. Or, changing the values to something different from each other can create various shapes.