Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Build a Bounce Ball with HTML, CSS, and JavaScript?
While designing webpages using plain HTML, CSS, and JavaScipt, programmers often prefer developing advanced CSS designs to make the website attractive. Creating animations using keyframes and other techniques is one of the most popular techniques nowadays. However, we can also use the JavaScript code to create animations such as the bouncing ball effect. This method gives us more control over the animations.
This article will first explain how to build a bouncing ball using HTML and CSS. We will also learn how to write JavaScript code to achieve similar animations.
Create Bounce Ball Using Keyframes
It is very difficult to make animations using pure HTML codes. Rather we have CSS, which provides us with several techniques to perform different animations. The most popular method to design animations in CSS is to use keyframes.
However, to create a bouncing ball, we must develop a login to implement it.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
bouncing {
display: flex;
flex-direction: row;
background-color: rgb(223, 210, 176);
align-items: center;
justify-content: center;
height: 50vh;
}
.bouncing-ul {
display: flex;
flex-direction: row;
}
.bouncing-ul li {
width: 40px;
height: 40px;
list-style: none;
background-color: rgb(55, 17, 108);
margin: auto 20px;
border-radius: 50%;
animation: bouncing 1s linear infinite alternate-reverse;
}
@keyframes bouncing {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-150px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<bouncing>
<ul class="bouncing-ul">
<li class="bouncing-li"></li>
</ul>
</bouncing>
</html>
The HTML code creates a bouncing ball effect using CSS animation. A block (bouncing class) is created with a defined height and background color. Its contents (an unordered list bouncing-ul) are aligned in the center vertically and horizontally. The ball (bouncing-li class) is created as a list item with a defined width, height, background color, margin, and border-radius to make it a circular shape.
The animation is created using the @keyframes rule, which defines the change in CSS property values over time. The animation is named "bouncing" and lasts 1 second, with a linear timing function and an infinite alternate-reverse iteration count. The ball moves vertically, translating from its original position (0%) to its highest point (-150px at 50%) and back to its original position (100%).
How To Create Bouncing Ball Effect Using JavaScript
Till now, we have understood how to create the bouncing ball effect using only HTML and CSS. However, sometimes we may want to perform the same task using programming languages like JavaScript instead of Markup language. JavaScript has access to the window object of the browser. Hence it is easy to define similar rules as we did in the case of CSS.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.ball {
position: absolute;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: rgb(41, 66, 190);
}
body{
display: flex;
flex-direction: row;
justify-content: center;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
const ball = document.querySelector('.ball');
let y = 0;
let direction = 1;
let speed = 8;
setInterval(() => {
y = y + speed * direction;
if (y >= window.innerHeight/3 - 50) {
direction = -1;
}
if (y <= 0) {
direction = 1;
}
ball.style.top = y + 'px';
}, 20);
</script>
</body>
Explanation
We have defined an element named ball which we customized using CSS to shape it as a circular ball. Within the script tag, we have written the javascript code, which contains all the logic for the animation.
First, we have targeted the ball element. Next, we have defined the speed. Within 2 seconds, the ball goes up and down. Whenever the ball reaches the end destination of either direction, the direction is changed.
Conclusion
In this article, we have learned how to create bouncing ball effect animation using HTML, CSS, and JavaScript. We have seen how to use the keyframes and CSS properties to perform the task. We saw how to create a bouncing ball effect for single and multiple balls. We recommend the readers to try different methods to achieve similar output.
2K+ Views
