Floating Balloons HTML Code

This HTML code creates an attractive floating balloons animation on your webpage. The HTML structure sets up a container for the balloons, styled with vibrant colors using CSS. JavaScript generates random balloon styles and positions, animating them to float upwards with a graceful motion. The purpose is to add a dynamic and festive touch to your webpage, making it visually engaging.

The animation starts automatically when the page loads and can be triggered by a click event, adding an interactive element.

How to Create Floating Balloons in HTML

1. Begin by adding the HTML code snippet below to your webpage. This establishes the container where the balloons will float.

<div id="balloon-container">
</div>

2. In the CSS section, copy and paste the following styles. This creates a visually appealing gradient background and defines the appearance of the balloons. Don’t forget to include the transition for a smoother effect.

body {
  margin: 0;
}

#balloon-container {
   background: linear-gradient(to right, #feac5e, #c779d0, #4bc0c8);
  height: 100vh;
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  transition: opacity 500ms;
}

.balloon {
  height: 125px;
  width: 105px;
  border-radius: 75% 75% 70% 70%;
  position: relative;
}

.balloon:before {
  content: "";
  height: 75px;
  width: 1px;
  padding: 1px;
  background-color: #FDFD96;
  display: block;
  position: absolute;
  top: 125px;
  left: 0;
  right: 0;
  margin: auto;
}

.balloon:after {
    content: "▲";
    text-align: center;
    display: block;
    position: absolute;
    color: inherit;
    top: 120px;
    left: 0;
    right: 0;
    margin: auto;
}

@keyframes float {
  from {transform: translateY(100vh);
  opacity: 1;}
  to {transform: translateY(-300vh);
  opacity: 0;}
}

3. Finally,integrate the JavaScript code into your webpage. This code dynamically generates and animates the balloons. Customize the number of balloons by adjusting the parameter in the createBalloons function.

const balloonContainer = document.getElementById("balloon-container");

function random(num) {
  return Math.floor(Math.random() * num);
}

function getRandomStyles() {
  var r = random(255);
  var g = random(255);
  var b = random(255);
  var mt = random(200);
  var ml = random(50);
  var dur = random(5) + 5;
  return `
  background-color: rgba(${r},${g},${b},0.7);
  color: rgba(${r},${g},${b},0.7); 
  box-shadow: inset -7px -3px 10px rgba(${r - 10},${g - 10},${b - 10},0.7);
  margin: ${mt}px 0 0 ${ml}px;
  animation: float ${dur}s ease-in infinite
  `;
}

function createBalloons(num) {
  for (var i = num; i > 0; i--) {
    var balloon = document.createElement("div");
    balloon.className = "balloon";
    balloon.style.cssText = getRandomStyles();
    balloonContainer.append(balloon);
  }
}

function removeBalloons() {
  balloonContainer.style.opacity = 0;
  setTimeout(() => {
    balloonContainer.remove()
  }, 500)
}

window.addEventListener("load", () => {
  createBalloons(30)
});

window.addEventListener("click", () => {
  removeBalloons();
});

That’s all! hopefully, you have successfully integrated this floating balloons animation HTML code into your webpage. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.