add balloons

1 year ago · 0127780259
3 changed files with 157 additions and 0 deletions
--- a/index.css
+++ b/index.css
@ -1,3 +1,4 @@
@charset "UTF-8";
 body {
  background: black !important;
 }
@ -214,3 +215,58 @@ body {
    box-shadow: 0 0 10px rgba(255, 165, 0, 0.5), 0 0 20px rgba(255, 165, 0, 0.5), 0 0 60px rgba(255, 165, 0, 0.5), 0 0 80px rgba(255, 165, 0, 0.5);
  }
 }
 #balloon-container {
  height: 100vh;
  padding: 1em;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  transition: opacity 500ms;
  position: fixed;
  top: 0;
 }
 .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;
  }
 }
--- a/index.php
+++ b/index.php
@ -11,6 +11,8 @@
 	</head>
 <body>
 	<h1 class="title">Happy Birthday Prime!</h1>
 	<div id="balloon-container">
 	</div>
 	<div class="cake">
 		<div class="plate"></div>
 		<div class="layer layer-bottom"></div>
@ -69,6 +71,53 @@ function randomInRange(min, max) {
    requestAnimationFrame(frame);
  }
 })();
 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();
 });
 	</script>
 	</body>
 	</html>
--- a/index.scss
+++ b/index.scss
@ -261,3 +261,55 @@ body {
            0 0 60px rgba(orange, 0.5),
            0 0 80px rgba(orange, 0.5) }
 }
  #balloon-container {
    height: 100vh;
    padding: 1em;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    transition: opacity 500ms;
    position: fixed;
    top:0;
  }
  .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;}
  }