This is the demo of bouncing ball animation here if you want to add bouncing ball on your display click on plus icon button if you clicked on plus icon button you can see bouncing ball animation, you click on plus icon button again and again you can see multiple bouncing ball with different and same color, this color is automatically picked by using javascript Math. Floor and Math. Random function, If you want to remove bouncing ball, you can click on the minus icon button inside bouncing balls.
Creating a Bouncing Ball Animation using HTML, CSS, and JavaScript following few steps:
- Create the HTML structure for the Bouncing Ball Animation.
- Style the Bouncing Ball Animation using CSS.
- Add events to the Bouncing Ball Animation using JavaScript.
- Write the JavaScript code to add and remove Bouncing Ball Animation.
Create the HTML structure for the Bouncing Ball Animation.
<!DOCTYPE html>
<html>
<head>
<title>Bouncing Ball | B-Link</title>
</head>
<body>
<div id="box" class="box">
<button id="addball" onclick="addball(); rndcolor()">+
</button>
</div>
</body>
</html>Style the Bouncing Ball Animation using CSS.
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 100%;
height: 100vh;
background-color: white;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.box #addball{
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, -0%);
width: 50px;
height: 50px;
border: 2px solid gray;
border-radius: 50%;
cursor: pointer;
}
.box #bouncingball{
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
width: 90px;
height: 90px;
border: 2px solid gray;
border-radius: 50%;
cursor: pointer;
animation: 2s bouncingball linear;
}
@keyframes bouncingball{
0%{
top: 0%;
animation-timing-function: ease-in;
}
50%{
top: 100%;
animation-timing-function: ease-in;
}
60%{
top: 80%;
animation-timing-function: ease-out;
}
70%{
top: 100%;
animation-timing-function: ease-in;
}
80%{
top: 90%;
animation-timing-function: ease-out;
}
90%{
top: 100%;
animation-timing-function: ease-in;
}
95%{
top: 95%;
animation-timing-function: ease-out;
}
100%{
top: 100%;
animation-timing-function: ease-in;
}
}
</style>Write the JavaScript code to add and remove Bouncing Ball Animation.
<script>
function addball(){
document.getElementById("box").insertAdjacentHTML(
'afterbegin',
`
<div class="row">
<button id="bouncingball" onclick="rmvbounceball(this)">-</button>
</div>
`
)
}
function rmvbounceball(button){
button.parentNode.remove();
}
function rndcolor(){
let cx = Math.floor(Math.random()*255)+0;
let cy = Math.floor(Math.random()*255)+0;
let cz = Math.floor(Math.random()*255)+0;
let rndpos = Math.floor(Math.random()*95);
document.getElementById("bouncingball").style.backgroundColor = "rgb("+cx+","+cy+","+cz+")";
document.getElementById("bouncingball").style.left = rndpos+"%";
}
</script>Create an HTML File (index.html) and use this code.
<!DOCTYPE html>
<html>
<head>
<title>Bouncing Ball | B-Link</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 100%;
height: 100vh;
background-color: white;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.box #addball{
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, -0%);
width: 50px;
height: 50px;
border: 2px solid gray;
border-radius: 50%;
cursor: pointer;
}
.box #bouncingball{
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -100%);
width: 90px;
height: 90px;
border: 2px solid gray;
border-radius: 50%;
cursor: pointer;
animation: 2s bouncingball linear;
}
@keyframes bouncingball{
0%{
top: 0%;
animation-timing-function: ease-in;
}
50%{
top: 100%;
animation-timing-function: ease-in;
}
60%{
top: 80%;
animation-timing-function: ease-out;
}
70%{
top: 100%;
animation-timing-function: ease-in;
}
80%{
top: 90%;
animation-timing-function: ease-out;
}
90%{
top: 100%;
animation-timing-function: ease-in;
}
95%{
top: 95%;
animation-timing-function: ease-out;
}
100%{
top: 100%;
animation-timing-function: ease-in;
}
}
</style>
</head>
<body>
<div id="box" class="box">
<button id="addball" onclick="addball(); rndcolor()">+</button>
</div>
<script>
function addball(){
document.getElementById("box").insertAdjacentHTML(
'afterbegin',
`
<div class="row">
<button id="bouncingball" onclick="rmvbounceball(this)">-</button>
</div>
`
)
}
function rmvbounceball(button){
button.parentNode.remove();
}
function rndcolor(){
let cx = Math.floor(Math.random()*255)+0;
let cy = Math.floor(Math.random()*255)+0;
let cz = Math.floor(Math.random()*255)+0;
let rndpos = Math.floor(Math.random()*95);
document.getElementById("bouncingball").style.backgroundColor = "rgb("+cx+","+cy+","+cz+")";
document.getElementById("bouncingball").style.left = rndpos+"%";
}
</script>
</body>
</html>Note:- this is just a basic example of bouncing ball animation and there are many ways to customize and expand on a bouncing ball animation created with HTML, CSS, and JavaScript.
