Creating Birthday Balloons like Twitter Profile (no image)

Colorful balloons fly on the Twitter profile page of users who have birthday. In this example, we will try to create and fly balloons without using any image. You can find the codes of this example here, also can watch fast-coding video above.

As usual, we create an index.html file and add links to our CSS and Javascript files. The required DOM elements will be dynamically added by Javascript, so we don’t need to add an element for now.

Next, CSS file. First, we will create a class called balloon and give its styles. This will be the main element surrounding our one single balloon. We have a CSS variable that holds the balloon’s width and height, — balloonDimension. We give full border-radius to our balloon except one corners, the less corner will be the down-facing corner. We rotate it with the transform: rotateZ(45deg) style so that this corner faces down. Finally, we give the balloon position: fixed and give the bottom value so that it does not appear on the screen and we will be sure that the starting position of all our balloons are same and will make our animation calculations accordingly.

By giving the necessary styles to the ::beforeand ::after pseudo elements of the balloon class, we create the light reflection and balloon node on the balloon. We also give the string class styles that make up the balloon string by making the necessary calculations. Here, as the balloon element has already rotated, we turn the string back at a right angle to make it straight. Finally, we create classes for several colors and finish our CSS file.

We open our file for javascript and assign it to a variable like in our previous examples and make it work while defining it.

We determine how many balloons will be on the screen with a variable called density. We create an element for balloon’s string, we will use it in our loop. We start a for loop with a limit of density. Inside this loop, we create the DOM element for the balloon and give it a random color as class name. We add the string element as child to the balloon element and add it to DOM. Lastly, with the help of setTimeout, we ensure that the balloons float in the visible area one by one by giving a random delay.

We give the swing animation in the releaseBalloon function. We assign the stages to our array variable named sequence so that the animation direction is random and use it in the balloon element. We call the releaseBalloon function again to the animation’s onfinish event and put the balloon back into the visible area.