Log in

View Full Version : background color changes automatically


Immi
11-20-2010, 07:41 PM
Hi,
I search for a script that changes a background color of a div automatically each millisecond or so. It should loop all the colors used with the hexacode. IS that possible and can somebody help me? It would be great to get an answer.
Thank you.
Immi
jscheuer1
11-20-2010, 10:43 PM
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#autocolor{
width: 5em;
height: 2em;
padding: 0.75em 0.5em 0;
text-align: center;
border: 1px solid black;
margin: 3em auto 0;
font: bold 90% sans-serif;
}
</style>
</head>
<body>
<div id="autocolor">
Wow!
</div>
<script type="text/javascript">
(function(){
var hexacode = ['#ffff00', '#ff0000', '#00ff00', '#0000ff', '#ffffff'],
el = document.getElementById('autocolor').style,
counter = -1,
hexalen = hexacode.length;
function auto(){
el.backgroundColor = hexacode[counter = ++counter % hexalen];
}
setInterval(auto, 20);
})();
</script>
</body>
</html>

Note: You may add/change as many hexacodes as you like. They don't even have to be hexadecimal values. They can also be valid css color name values or valid css decimal rgb values.
Immi
11-22-2010, 07:46 PM
Well, I added a few more colors. But thanks a lot for the script!



<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#autocolor{
width: 1000px;
height: 700px;
padding: 0.75em 0.5em 0;
text-align: center;
border: 1px solid black;
margin: 3em auto 0;
font: bold 90% sans-serif;
}
</style>
</head>
<body>
<div id="autocolor">
Wow!
</div>
<script type="text/javascript">
(function(){
var hexacode = [

'#ff0000',
'#ff0400',
'#ff0800',
'#ff0d00',
'#ff1100',
'#ff1500',
'#ff1900',
'#ff1e00',
'#ff2200',
'#ff2600',
'#ff2a00',
'#ff2f00',
'#ff3300',
'#ff3700',
'#ff3c00',
'#ff4000',
'#ff4400',
'#ff4800',
'#ff4d00',
'#ff5100',
'#ff5500',
'#ff5900',
'#ff5e00',
'#ff6200',
'#ff6600',
'#ff6a00',
'#ff6e00',
'#ff7300',
'#ff7700',
'#ff7b00',
'#ff7f00',
'#ff8400',
'#ff8800',
'#ff8c00',
'#ff9100',
'#ff9500',
'#ff9900',
'#ff9d00',
'#ffa200',
'#ffa600',
'#ffaa00',
'#ffae00',
'#ffb300',
'#ffb700',
'#ffbb00',
'#ffbf00',
'#ffc300',
'#ffc800',
'#ffcc00',
'#ffd000',
'#ffd400',
'#ffd900',
'#ffdd00',
'#ffe100',
'#ffe500',
'#ffea00',
'#ffee00',
'#fff200',
'#fff700',
'#fffb00',
'#ffff00',
'#fbff00',
'#f6ff00',
'#f2ff00',
'#eeff00',
'#eaff00',
'#e5ff00',
'#e1ff00',
'#ddff00',
'#d9ff00',
'#d5ff00',
'#d0ff00',
'#ccff00',
'#c8ff00',
'#c4ff00',
'#bfff00',
'#bbff00',
'#b7ff00',
'#b3ff00',
'#aeff00',
'#aaff00',
'#a6ff00',
'#a1ff00',
'#9dff00',
'#99ff00',
'#95ff00',
'#90ff00',
'#8cff00',
'#88ff00',
'#84ff00',
'#80ff00',
'#7bff00',
'#77ff00',
'#73ff00',
'#6fff00',
'#6aff00',
'#66ff00',
'#62ff00',
'#5eff00',
'#59ff00',
'#55ff00',
'#51ff00',
'#4cff00',
'#48ff00',
'#44ff00',
'#40ff00',
'#3bff00',
'#37ff00',
'#33ff00',
'#2fff00',
'#2aff00',
'#26ff00',
'#22ff00',
'#1eff00',
'#1aff00',
'#15ff00',
'#11ff00',
'#0dff00',
'#09ff00',
'#04ff00',
'#00ff00',
'#00ff04',
'#00ff08',
'#00ff0d',
'#00ff11',
'#00ff15',
'#00ff1a',
'#00ff1e',
'#00ff22',
'#00ff26',
'#00ff2b',
'#00ff2f',
'#00ff33',
'#00ff37',
'#00ff3c',
'#00ff40',
'#00ff44',
'#00ff48',
'#00ff4c',
'#00ff51',
'#00ff55',
'#00ff59',
'#00ff5d',
'#00ff62',
'#00ff66',
'#00ff6a',
'#00ff6e',
'#00ff73',
'#00ff77',
'#00ff7b',
'#00ff80',
'#00ff84',
'#00ff88',
'#00ff8c',
'#00ff91',
'#00ff95',
'#00ff99',
'#00ff9d',
'#00ffa1',
'#00ffa6',
'#00ffaa',
'#00ffae',
'#00ffb2',
'#00ffb7',
'#00ffbb',
'#00ffbf',
'#00ffc3',
'#00ffc8',
'#00ffcc',
'#00ffd0',
'#00ffd5',
'#00ffd9',
'#00ffdd',
'#00ffe1',
'#00ffe6',
'#00ffea',
'#00ffee',
'#00fff2',
'#00fff7',
'#00fffb',
'#00ffff',
'#00fbff',
'#00f7ff',
'#00f2ff',
'#00eeff',
'#00eaff',
'#00e6ff',
'#00e1ff',
'#00ddff',
'#00d9ff',
'#00d5ff',
'#00d0ff',
'#00ccff',
'#00c8ff',
'#00c3ff',
'#00bfff',
'#00bbff',
'#00b7ff',
'#00b2ff',
'#00aeff',
'#00aaff',
'#00a6ff',
'#00a1ff',
'#009dff',
'#0099ff',
'#0095ff',
'#0091ff',
'#008cff',
'#0088ff',
'#0084ff',
'#0080ff',
'#007bff',
'#0077ff',
'#0073ff',
'#006eff',
'#006aff',
'#0066ff',
'#0062ff',
'#005dff',
'#0059ff',
'#0055ff',
'#0051ff',
'#004cff',
'#0048ff',
'#0044ff',
'#0040ff',
'#003cff',
'#0037ff',
'#0033ff',
'#002fff',
'#002bff',
'#0026ff',
'#0022ff',
'#001eff',
'#001aff',
'#0015ff',
'#0011ff',
'#000dff',
'#0008ff',
'#0004ff',
'#0000ff',
'#0400ff',
'#0900ff',
'#0d00ff',
'#1100ff',
'#1500ff',
'#1900ff',
'#1e00ff',
'#2200ff',
'#2600ff',
'#2a00ff',
'#2f00ff',
'#3300ff',
'#3700ff',
'#3c00ff',
'#4000ff',
'#4400ff',
'#4800ff',
'#4d00ff',
'#5100ff',
'#5500ff',
'#5900ff',
'#5e00ff',
'#6200ff',
'#6600ff',
'#6a00ff',
'#6e00ff',
'#7300ff',
'#7700ff',
'#7b00ff',
'#7f00ff',
'#8400ff',
'#8800ff',
'#8c00ff',
'#9100ff',
'#9500ff',
'#9900ff',
'#9d00ff',
'#a200ff',
'#a600ff',
'#aa00ff',
'#ae00ff',
'#b300ff',
'#b700ff',
'#bb00ff',
'#bf00ff',
'#c300ff',
'#c800ff',
'#cc00ff',
'#d000ff',
'#d400ff',
'#d900ff',
'#dd00ff',
'#e100ff',
'#e500ff',
'#ea00ff',
'#ee00ff',
'#f200ff',
'#f700ff',
'#fb00ff',
'#ff00ff',
'#ff00fb',
'#ff00f7',
'#ff00f2',
'#ff00ee',
'#ff00ea',
'#ff00e5',
'#ff00e1',
'#ff00dd',
'#ff00d9',
'#ff00d4',
'#ff00d0',
'#ff00cc',
'#ff00c8',
'#ff00c3',
'#ff00bf',
'#ff00bb',
'#ff00b7',
'#ff00b3',
'#ff00ae',
'#ff00aa',
'#ff00a6',
'#ff00a1',
'#ff009d',
'#ff0099',
'#ff0095',
'#ff0091',
'#ff008c',
'#ff0088',
'#ff0084',
'#ff007f',
'#ff007b',
'#ff0077',
'#ff0073',
'#ff006e',
'#ff006a',
'#ff0066',
'#ff0062',
'#ff005e',
'#ff0059',
'#ff0055',
'#ff0051',
'#ff004d',
'#ff0048',
'#ff0044',
'#ff0040',
'#ff003c',
'#ff0037',
'#ff0033',
'#ff002f',
'#ff002a',
'#ff0026',
'#ff0022',
'#ff001e',
'#ff0019',
'#ff0015',
'#ff0011',
'#ff000d',
'#ff0008',
'#ff0004'
],
el = document.getElementById('autocolor').style,
counter = -1,
hexalen = hexacode.length;
function auto(){
el.backgroundColor = hexacode[counter = ++counter % hexalen];
}
setInterval(auto, 20);
})();
</script>
</body>
</html>
Solly
03-08-2016, 10:00 AM
That's cool, do you think it would be possible to edit this so it changes the background image automatically instead of just colors?
jscheuer1
04-28-2016, 03:32 PM
Sure, but as this is a little off topic and such an old post, please start a new thread if you're still interested. I can tell you it would be a little more complicated than just substituting images and then using the backgrounImage property, because images would have to be preloaded and even rotated behind each other using CSS 2 multiple backgrounds to avoid too jarring of a transition. I thin DD also may already have such a slideshow.