Sunday, October 14, 2018

How can we create a bouncing ball without using any JavaScript?

Animating the UI is an effective way to draw the attention from users and make our apps more interesting. When I was working on a Silverlight to HTML5 project, I come across many animated user interface. Our roadmap is not to use jQuery dependent code unless we have to. From this project, I learnt many things on CSS animation and it is highly efficient and effective way of doing animation.
We do not clutter the JavaScript code.
We reduce the execution overhead and save CPU cycle.
Our code will stay current and relevant as new technologies come up.
We have no dependency on any other third party library as we use pure native features from what browsers support.
***No workaround or hacky stuff.
Here I want to share a sample code which is of a little something similar to how I did UI animation.
I make it bare minimum to make it more intuitive and easy to understand.
Just copy the sample html, save it and open it in a Chrome, Firefox, IE11 or Edge browsers.
You will see the ball bouncing inside its container - without any JavaScript required.


Source code

Code in Action

1 comment:

  1. React, or React. JS, is a front-end Javascript library for building UI components for the web. If you are interested in web development, React is the perfect library to learn to create interactive, dynamic single-page apps, or even full-scale web applications. if anyone wants to learn programming then you can also checkout these React.js interview questions

    ReplyDelete

Image compression using C#

Sometimes, we need to compress the image files while maintaining the image quality. This can be achieved by the following C# implementation....