Skip to content

Instantly share code, notes, and snippets.

@shadowhand

shadowhand/js_animate_color.html

Created May 28, 2010 22:03
Show Gist options
  • Save shadowhand/417817 to your computer and use it in GitHub Desktop.
Save shadowhand/417817 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
js_animate_color.html
<html>
<head>
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function()
{
var cb = $('<div class="color"/>').appendTo('body');
var c1 = [255, 0, 0];
var c2 = [0, 255, 255];
var s = 0, c = 100, i;
i = setInterval(function()
{
var r = Math.round(((c2[0] - c1[0]) / c * s) + c1[0]);
var g = Math.round(((c2[1] - c1[1]) / c * s) + c1[1]);
var b = Math.round(((c2[2] - c1[2]) / c * s) + c1[2]);
cb.css('background-color', 'rgb('+ r +', '+ g +', '+ b +')');
s++;
if (s >= c) { clearInterval(i); }
}, 10);
});
</script>
<style type="text/css" media="screen">
body { background: #000; color: #fff; text-align: center; }
div.color { height: 10em; width: 10em; margin: 1em auto; background: #fff; }
</style>
</head>
<body>
<h1>Animated Colors</h1>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment