treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] How would i change the background on a timer?

  • So lets just assume that i have been living under a rock the past couple years and not really had time to learn and really understand jquery. But i have started looking at it, and it seems fairly simple im just horrible at Google searching.

    My question is, how would i go about changing the background for the entire page ( on a timer ) with some sort of fade or ease out.

    Now i know how to use javascript to link a different stylesheet depending on time but i would like to use the Math.random * 255 to randomly generate a different color.

    Im not expecting code but if anyone has a few good references i would be much appreciated.

    Horrible Excuse for Pseudo code:

    $(document).ready(function() {
    //variable for the random number
    var randomColor = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    //im guessing the element below to be effected?
    // ??????????????????????????????????????????????
    // this is my attempt to at least attempt a guess than expect any help lol...
    });
  • You've done pretty well so far. I've done a quick example with javascript + the css3 transition property: http://jsfiddle.net/jamygolden/ETcRU/
  • In the words of "Chester Cheetah" (from the cheetos commercials)
    ..."Well done sahh"..

    Thank you, i could really implement and expand off that example. I didnt even think about using CSS3 transitions, good call.. Again, thanks so super D duper Much.
  • haha is that what Chester used to say? It's been so long since I've seen an ad! All I can think about right now is Tony the Tiger... "Theeeey're Greeeeaaaat!"
  • What about a css3 animation? Like this: http://dabblet.com/gist/1676989
  • @cnwtx hey man, checked out that link, fairly simple but as the example that jamy_za provided i can use just a little bit of jquery and a variable that randomizes my output. Yet again, css3 could be my answer for javascript disabled browsers. Thanks for the link, on another note, i haven't checked out this dabblet site before but it seems pretty easy and very user friendly... But that code is an easy alternative to being able to select my colors and i could add different transitions. Thanks again cnwtx.