Background Colour Fade

This is another example of using interval timers and basic events to generate a dynamic effect. This example is a tribute to my favourite synth manufacturer Arturia.

In this case, I have a div containing the image. The div is there to provide positioning, padding and margins around the image but also, in this case, it is the element to which the background colour fading is applied. The base image has a transparent background allowing the background colour to show through. As the background colour fades to different colours in the image text, those parts of the text disappear into the background.

Again, at some point I'll provide more detailed tutorial notes on this stuff. For the moment, you can look at the initialization code in the head of this document, and the Start command near the end of the document. You should be able to figure out how to use it from that. If you want to see the actualy JavaScript that does the work, you can read the source here. There are a lot of comments in the header giving additional explanation.