Grow your CSS skills. Land your dream job.

How would i change the background on a timer?

  • # January 24, 2012 at 12:13 am

    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...
    });
    # January 24, 2012 at 3:09 am

    You’ve done pretty well so far. I’ve done a quick example with javascript + the css3 transition property: http://jsfiddle.net/jamygolden/ETcRU/

    # January 24, 2012 at 3:16 am

    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.

    # January 24, 2012 at 11:59 am

    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!”

    # January 25, 2012 at 12:22 pm

    What about a css3 animation? Like this: http://dabblet.com/gist/1676989

    # January 25, 2012 at 3:00 pm

    @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.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".