How to change background color every n-seconds?

Question

So a while back I think i saw an effect on some site that was transitioning between different background colors (changing background colors).

The color changed like every 2-3 seconds.

The transitions were pretty smooth as well. I found it pretty cool.

I'm redesigning my services website and would like to add that effect to my site.

There are 2 variables that need to be controlled: time and color.

PS Not trying to get anyone to write the code for me, but could you please refer me to some links where I can find out about this effect.

Would be great if you could tell me the name of this effect and the library it exists in.

Answer 1

Here's JS Fiddle that shows you some @keyframes in combo with the js to slow down timing via click. Hope that helps!

.body {
    width: 100%;
    height: 1000px;
    animation-name: colorChange;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    text-align: center;
}

@keyframes colorChange {
    0% {
        background: red;    
    }
    20% {
        background: blue;    
    }
    40% {
        background: green;    
    }
    60% {
        background: orange;    
    }
    80% {
        background: purple;    
    }
    100% {
        background: red;    
    }
}

.button {
    padding: 10px;
    margin-top: 40px;
    font-size: 20px;
}

---

$( ".button" ).on( "click", function () {
    $( ".body" ).css( "animation-duration", "20s" ) 
})

---

Edit Added snippet.

 $( ".button" ).on( "click", function () { $( ".body" ).css( "animation-duration", "20s" ) })

 .body { width: 100%; height: 1000px; animation-name: colorChange; animation-duration: 10s; animation-iteration-count: infinite; text-align: center; } @keyframes colorChange { 0% { background: red; } 20% { background: blue; } 40% { background: green; } 60% { background: orange; } 80% { background: purple; } 100% { background: red; } } .button { padding: 10px; margin-top: 40px; font-size: 20px; }

 <div class="body"> <button class="button">Change Timing</button> </div>

Answer 2

To change your website background color in a defined time interval you can follow the bellow link. http://www.cakephpexample.com/html/add-gradient-effect-to-your-website-by-javascript/

Where a complete example given with source code.

Answer 3

You can possibly do it with CSS3 animation keyframes.

Take a look at this Fun With Pulsing Background Colors in CSS3 .