In this blog post you'll learn how to make a simple animation on mouse click which is balloon animation using html CSS and JavaScript. I have already shared the mouse click effect using html CSS and JavaScript which is very similar to this.
You’ll learn in this blog:
- How to create and add new element on web page on click using JavaScript.
- How to add flying and fade out animation using CSS and JavaScript.
- Add different colours to elements dynamically using JavaScript.
What's this mouse click animation looks like?
When user click anywhere on web page a balloon (its not exact balloon its a circle, but if you want a proper balloon you can use balloon image or any other like hearts, fruits, bubbles, etc ) or ball forms at the cursor pointer with different colours and float up with increasing in size and disappears after few milliseconds. You can see a demo of this animation in the YouTube video below.
I have also provided well commented code, demo, video tutorial etc. in this post.
Video Tutorial of Balloon Mouse Click Effect.
Here I just added balloon or circle with different colours but you can also use images to add at cursor pointer on click and fly it like a balloon and disappear it. You can use image of heart, bubbles, thumbs up, etc and make it fly up like balloon and disappear it.
You can use this animation to like on photos, videos etc on your website.
Mouse click effect with balloon like animation.
How we going to form balloon on click and animate it to fly and disappear?
To make this mouse click animation. First, we going to form a balloon (span tag) on click on document.
Then we going to add class in it for styling and animation of increasing in size.
Then we going to animation the balloon to fly or float up from the mouse click point or formation point.
Then after a second, we going to remove it because we don’t want to stay that span tag or balloon in web page.
So now let’s make this mouse click animation step by step.
First create one folder and open it in your code editor and create files.
File structure:
- Index.html
- Index.css
Step 1: Create basic structure of html.
Create basic structure of html and link the CSS file and also add basic CSS code.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100vh;
background-color: #fff;
}
Output:
Step 2: Create balloon at mouse click point on web page.
Create balloon (span tag) on click on document and add class (balloon) to it for styling and increasing size.(css animation keyframes)
And also add styling with JavaScript.
- To form balloon on cursor clicked position.
- Add animation to balloon to float up after formation.
- Add different background colour to balloon on every click.
CSS
.balloon {
position: absolute;
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
border-radius: 50%;
pointer-events: none;
opacity: 0;
animation-name: balloon_animation;
animation-timing-function: linear;
animation-duration: 0.8s;
}
@keyframes balloon_animation {
0% {
opacity: 1;
transform: scale(0.1);
}
25% {
opacity: 1;
transform: scale(0.2);
}
50% {
opacity: 0.8;
transform: scale(0.6);
}
75% {
opacity: 0.5;
transform: scale(0.8);
}
100% {
opacity: 0;
transform: scale(1);
/* top: 0px; */
}
}
JavaScript
// Different colors for balloons.
let colors = ["red", "yellow", "blue", "green", "violet", "orange", "darkblue", "pink", "brown"];
// i variable is for getting colors one by one from above colors variable array.
let i = 0;
// declaring and running function on click on document.
document.onclick = function (e) {
// incrementing i variable value by one. For getting array colors one by one for ballons.
i++;
// For Getting the clicked positions
let x = e.pageX;
let y = e.pageY;
// Creating new element. if you want to add image create img tag here instead.
let span = document.createElement("span");
// Adding class to it for styling and animation to increase size. (with css keyframes).
span.classList.add("balloon");
// Getting the mouse or cursor clicked positions with above declared x and y variables.
span.style.top = y + "px";
span.style.left = x + "px";
// To fly the balloons from the top position at which it formed to -250px with animation.
setTimeout(() => {
span.style.top = y - "250" + "px";
span.style.transition = "0.8s";
}, 10);
// Setting different background color to each balloon with the help of colors variable array and i variable (which is increamenting).
span.style.backgroundColor = colors[i - 1];
// Adding this newly created element to web page.
document.body.appendChild(span);
// Setting i variable value to zero again as initially given, when its equals to colors variable(array) length. So that array colors starts againg from starts.
if (i == colors.length) {
i = 0;
}
}
Step 3: Remove balloon after few milli seconds.
Now after the formation, flying the balloon on click we also have to remove it from web page (if you see console after click there is span tag formed in web page). Because we don’t want it anymore because we form it new every time on click.
Note: write code inside the function.
JavaScript
// Remove this newly created element from web page.
setTimeout(() => {
span.remove();
}, 1000);
So that’s it you can see demo in above YouTube video.
You may like:
- How to create a mouse click ripple effects using HTML CSS and JavaScript.
- How to create a mouse cursor tail using JavaScript.
Final code:
Conclusion:
Creating a balloon animation on mouse click is a fun and easy way to add some interactivity to your website. By following the steps above, you can create your own custom animations like animate heart, bulbs, bubbles, smoke, etc that will engage your visitors and make your website more visually appealing. If you have any query or suggestion you can write in comment section.
Thanks For Reading This Far.
Share your thoughts.