CODEWITHSUNDEEP
javascripthtmlcss
user4033772
user4033772

Reputation:

Need animation when background color change

I created a web page, there color changing background of a div with three different color. I have following code. its works but when background change i need simple animation when they change the color.I don't about animation please help.

<script type="text/javascript">
(function(){
	var hexacode = [
'#ff3333',
'#33cc66',
'#3399cc',
],
	el = document.getElementById('autocolor').style,
	counter = -1,
	hexalen = hexacode.length;
	function auto(){
		el.backgroundColor = hexacode[counter = ++counter % hexalen];
	}
	setInterval(auto, 2000);
})();
</script>
#autocolor{
	width: 1000px;
	height: 700px;
	padding: 0.75em 0.5em 0;
	background:#3399cc;
	border: 1px solid black;
	margin: 3em auto 0;
	font: bold 90% sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="autocolor">

</div>
</body>
</html>

Upvotes: 1

Views: 121

Answers (4)

mollie
mollie

Reputation: 150

This code may help. add or edit color code and animation as you want.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
var colours=['#ff3333','#33cc66','#3399cc'];  // List of colors
    var tempID=0;
    var changeInterval=2000;    // Change interval in miliseconds
    var objectID='#bgDiv';      // Object to change colours. 
    
    $(document).ready(function(){        
        setInterval(function(){
                $(objectID).animate({backgroundColor: colours[tempID]},500);
                tempID=tempID+1;
                if (tempID>colours.length-1) tempID=0;
            },changeInterval);
    });
</script>
<style> 
#bgDiv {
    width: 100px;
    height: 100px;
    background: #3399cc;
}
</style>
</head>
<body>
	<div id="bgDiv"></div>
</body>
</html>

Upvotes: 2

Vishwanath
Vishwanath

Reputation: 6004

Keyframes have support for percentages as well. You can try below code and tweak it as per your need.

div {
    width: 100px;
    height: 100px;
    background: #ff3333;
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count: 3;  /* Chrome, Safari, Opera */
    animation: myfirst 10s;
    -webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
    animation-direction: reverse;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
  0% { background:  #3399cc;}
  50% { background:#33cc66; }
  100% { background:#ff3333; }
}

/* Standard syntax */
@keyframes myfirst {
  0% { background:  #3399cc;}
  50% { background:#33cc66; }
  100% { background:#ff3333; }
}
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>

Upvotes: 0

Varun Jain
Varun Jain

Reputation: 1421

I am pasting a code snippet that uses HTML5 and CSS3 only.

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: #ff3333;
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count: 3;  /* Chrome, Safari, Opera */
    animation: myfirst 5s;
    -webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
    animation-direction: reverse;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from {background: #ff3333;}
    to {background: #ff5533;}
}

/* Standard syntax */
@keyframes myfirst {
    from {background: #ff3333;}
    to {background: #ff5533;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

You just need to give two close hexadecimal color codes as I gave.

Upvotes: 0

Inactive
Inactive

Reputation: 16

Color animation can be tricky. If you are ok with using jquery, you can check this link out (click "View source") http://jqueryui.com/animate/

That example animates both the color and the width of the control.

Upvotes: 0

Related Questions