Scribd
Upload
7 views4 pages

Colorful Floating Balloons Animation

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
7 views4 pages

Colorful Floating Balloons Animation

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

<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 = [Link]("balloon-container");


function random(num) {

return [Link]([Link]() * 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 = [Link]("div");

[Link] = "balloon";

[Link] = getRandomStyles();

[Link](balloon);

function removeBalloons() {

[Link] = 0;
setTimeout(() => {

[Link]()

}, 500)

[Link]("load", () => {

createBalloons(30)

});

[Link]("click", () => {

removeBalloons();

});

You might also like