Every New Year's Day, many of my family and friends gather to play bingo. In recent years there have been too many people in the house to hear what numbers have been called.
bingo-board.org for anyone to set up a bingo board and provides a URL for "calling" the numbers, and one for watching the board.
Here is a video of the effects as they currently stand. You can see that when a number is called, it animates and then continues to animate until another is called.
What is happening is pretty awesome. Each "bingo marker" has a .disabled class initially:
If a marker has been called, it will have an .enabled class on it:
The animation here is the quick initial bounce when a number is activated (most visible above when a marker turns from red to black). This is achieved by a simple keyframe animation on the scale attribute of the element. Before I discovered scale, I tried animating all of the attributes including font-size a while back which didn't work out so well.
The last animation that is visible in the video is the long, repeating bounce for whichever marker is the last enabled. For this, like all of the above animations, I just add a class, lastEnabled:
As you can see, this class merely changes the color of the marker and begins a repeating animation, once again on the scale attribute.
Another animation that I experimented with, but ended up removing, was the following:
This effect was quite fun to figure out how to achieve, although it may not look all that pleasing. I wanted to figure out how to move that "caution tape" looking background without using any images. In order to create the "caution tape" look, I wrote a little SVG that generates these diagonal stripes:
These stripes are then loaded into that "background" element as the background-image:
Since the bars are already at a diagonal, all I need to do now is move them continuously: