Scribd
Upload
4 views4 pages

Floating Balloons Code

The document contains HTML and CSS code for a balloon animation effect, where balloons are created dynamically and float upwards. It includes JavaScript functions to generate random styles for the balloons and to remove them upon a click event. The animation is designed to transition the balloons' opacity and position over time.

Uploaded by

samswag2898
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views4 pages

Floating Balloons Code

The document contains HTML and CSS code for a balloon animation effect, where balloons are created dynamically and float upwards. It includes JavaScript functions to generate random styles for the balloons and to remove them upon a click event. The animation is designed to transition the balloons' opacity and position over time.

Uploaded by

samswag2898
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

<div id="balloon-container">

</div>

body {

margin: 0;

#balloon-container {

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;}

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();

});

You might also like