Floating Balloons HTML Code

Floating Balloons HTML Code
Code Snippet:Floating Balloons
Author: Jemima
Published: January 12, 2024
Last Updated: January 22, 2024
Downloads: 1,264
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X