Automatic changing background color loop (jQuery/css?)
Question
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. :)
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.
3 answers
solution1
5 ACCPTED 2016-02-13 07:13:14
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.
solution2
0 2016-02-13 07:08:25
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>
solution3
0 2016-02-13 07:47:29
$("body").css("transition","all 3s");
var arr = ["#f00","#0f0","#00f"];
function changeColor(){
$("body").css({
backgroundColor : arr[parseInt(Math.random() * 3)]
});
}
changeColor();
setInterval(changeColor,3000);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.