Spin wheel image in HTML5 (e.g., roulette wheel)?
What's the best way to emulate a spinning roulette wheel in HTML5?
The wheel spinning should be controllable by some input (i.e., speed of spinning based on some user input). The wheel labels should blur as the wheel spins fast, but as the spinning slows, the labels on the wheel become more and more readable.
Are there HTML5 libraries that support this, or do the animations need to be programmed by hand?
This also needs to be supported on iOS devices.
Answer
It can be done in a few lines of CSS.
- http://jsfiddle.net/YNBxz/1/ – CSS-only (see in Chrome or Safari).
- http://jsfiddle.net/YNBxz/2/ – with some JavaScript, to demonstrate how to customize the animation.
Blurring is an optical effect, it doesn't need to be simulated.