Ball Bounce On Text

On a daily basis I find more and more how powerful the combination of CSS and JavaScript is. In this Bouncing Ball experiment I implemented the “Disney Bouncing Ball” animation ontop of an editable text field. This bouncing ball jumps over the words inside the contentEditable paragraph. The text itself is editable, the jump speed is dynamic, and the ball bounce animation duration is set by the length of each word.

The JavaScript is accountable for breaking the words and calculating their positions; then it operates CSS transitions in a pre-calculated time delays, to bump the ball on each word according to the positions of the words.