Balloon!

In this example below you will see how to do a Balloon! with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by andreanc223, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright andreanc223 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Balloon!</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>
  <div id="balloonGroup">
  </div>
</body>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/andreanc223/balloon-KzGzPX */
.balloon1 {
  border-radius: 100%;
  animation: balloon1 3s ease-in infinite;
  position: absolute;
}

.balloon2 {
  border-radius: 100%;
  animation: balloon2 3s ease-in infinite;
  position: absolute;
}

.balloon3 {
  border-radius: 100%;
  animation: balloon3 3s ease-in infinite;
  position: absolute;
}

@keyframes balloon1 {
  20% {
    transform: rotate(-20deg) translateY(0%);
  }
  100% {
    transform: rotate(50deg) translateY(-1000%);
  }
}
@keyframes balloon2 {
  40% {
    transform: rotate(10deg) translateY(0%);
  }
  100% {
    transform: rotate(-50deg) translateY(-300%);
  }
}
@keyframes balloon3 {
  20% {
    transform: rotate(5deg) translateY(-20%);
  }
  60% {
    transform: rotate(-5deg) translateY(-300%);
  }
  100% {
    transform: rotate(10deg) translateY(-800%);
  }
}


/*Downloaded from https://www.codeseek.co/andreanc223/balloon-KzGzPX */
(function() {
  
  function init() {
    generateBalloons();
  }
 
  function generateBalloons() {
      for(var i = 0; i < 10; i++) {
        var balloon = rand(1,4);
        //var balloon = 3;
        var width = rand(100, 200);
        var height = rand(width, 250);
        var marginLeft = rand(20, 50);
        var marginTop = rand(10, 80);
        var delay = rand(1, 4);
        var color = randColor();
        var styleStr = "background-color: " + color + ";" + "width: " + width + "px; height: " + height + "px; margin-left: " + marginLeft + "%; margin-top: " + marginTop + "%; animation-delay: " + delay + "s";
        var $balloon = $("<span>", {id: "foo", class: "balloon" + balloon, style: styleStr});
        $("#balloonGroup").append($balloon);
      }
  }
  
  function rand(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }
  
  function randColor() {
    return 'rgba('+ (Math.floor(Math.random() * 256)) + ','+ (Math.floor(Math.random() * 256)) + ','+ (Math.floor(Math.random() * 256)) + ',' + (Math.random()) + ')';
  }
  
  init();
}())

Comments