Automatic changing background color loop (jQuery/css?)

2 Views

I’ve seen this feature in a couple of WordPress themes where the background of for example the footer slowly changes its color, and I have always wondered if there is a simple trick to do this. (This is probably done with jquery? Or can it be done with pure css?)

Basically, the background color gradually transitions from one color to another (for example pink to blue, blue to red, red to pink) and stays in an infinite loop. It doesn’t require any action such as hover or click, it just does its thing. 🙂

Read More

Is there an easy way to do this? If so, would love to see the best way to do this with an example code.

Thank you so much in advance.

Post Views: 2

Related posts

3 comments

  1. You don’t need in jQuery for making this trick. You can use simple css animation instead, and it will be more perfomence and simply.

    It’s my example

    Our layout’s 

    <div class="block"></div>

    Css style

     html, body {
     width: 100%;
     height: 100%;
  } 

 @keyframes color-animation {
    0% {
       background: #ad1457;
    }
    50% {
       background: #6a1b9a;
    } 
    100% {
       background: #bbdefb
    } 
 }

.block {
   width: 100%;
   height: 100%;
   animation: color-animation 3s infinite linear alternate;
}

    In this code we created simple css animation, which change colors of our block.

    You’re welcome 🙂 Can you ask me something, if you want.

  2. Something like this ? 

    <!DOCTYPE html>
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<div style="height:150px">
    <div>
        <h1 id="heading"><center>That's how i change color!!</center></h1>
    </div>
    <br><br>
    <div  class="bordered" id="fancy">
        <center>I behave like a chameleon!!</center>
    </div>
    <div style="margin-top:10%; font-size:1em; font-weight:bold;">CSS + JS = AWESOME!!<br><br>Code By Punit gajjar</div>
</div>
<script>
    var myArray = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
setInterval(function () {
    var rand = myArray[Math.round(Math.random() * (myArray.length - 1))];
    var rand1 = myArray[Math.round(Math.random() * (myArray.length - 1))];
    var rand2 = myArray[Math.round(Math.random() * (myArray.length - 1))];
    var rand3 = myArray[Math.round(Math.random() * (myArray.length - 1))];
    var rand4 = myArray[Math.round(Math.random() * (myArray.length - 1))];
    var rand5 = myArray[Math.round(Math.random() * (myArray.length - 1))];  
    document.getElementById("fancy").style.background= '#'+rand+rand2+rand3+rand1+rand5+rand4;
  document.body.style.background= '#'+rand+rand1+rand2+rand3+rand4+rand5;
    setTimeout(function () {
        var rand = myArray[Math.round(Math.random() * (myArray.length - 1))];
      var rand1 = myArray[Math.round(Math.random() * (myArray.length - 1))];
      var rand2 = myArray[Math.round(Math.random() * (myArray.length - 1))];
      var rand3 = myArray[Math.round(Math.random() * (myArray.length - 1))];
      var rand4 = myArray[Math.round(Math.random() * (myArray.length - 1))];
      var rand5 = myArray[Math.round(Math.random() * (myArray.length - 1))];  
      document.getElementById("fancy").style.background= '#'+rand+rand2+rand1+rand3+rand5+rand4;
      document.body.style.background= '#'+rand+rand1+rand3+rand2+rand4+rand5;
    }, 1000);   
}, 1000);
</script>

  3. $("body").css("transition","all 3s");
var arr = ["#f00","#0f0","#00f"];
function changeColor(){
   $("body").css({
        backgroundColor : arr[parseInt(Math.random() * 3)]
      });
}
changeColor();
setInterval(changeColor,3000);

Comments are closed.