This experiment is NOT meant to be viewed on a mobile device. Your device may not be
able to handle the program updating several nodes in the DOM 60 times in a second.
Also your device screen may be too small to see the background changing.
I've been researching HTML5 Animation and color theory so I wanted to try a few experiments.
I wanted to experiment with changing the background
color of the page using the requestAnimationFrame function.
Granted, this experiment is using JS and not CSS3, but it is
In my head, I thought it would increment by one in hex
from 000000 to FFFFFF and go through all the colors of the
rainbow. Instead, it mostly cycles from black to blue and then
cycles back and forth between blues and greens. When the red
section gets near double F, this is when the other colors of
the rainbow start to show up. It takes a very long time to get
the red section to double FF.
I decided to test the background with the RGB color format. I had each color section increment simultaneously.
This just displays black, then different shades of gray until it reaches white.
I then, decided to add a feature to be able to add a color instead of always starting from 0. I also added
a feature to capture the current background color and display a sample of the color.