Sunset Color Animation JavaScript

Sunset Color HTML5 Animation Tutorial Hexadecimal Colors

Introduction

This page includes the JavaScript, source code, for sunset animated color cycling behind semi transparent areas of an image. A small div element displays the actual color and hexadecimal number during animation. See the sunset color animation example.

JavaScript

var timer = null;     
 
// Increase to
// loop more times.
// Three sunrise sunsets.
var iCycleMax = new Number(
 3
); 

// Counts to limit
// color cycles.
var iCycleCount = new Number(
 0
);

// Index into
// array of colors.
var iCycle = new Number(
 0
);                                                                                     

Color Array

// Array of colors
var aCycle = new Array(
"#000000",
"#130d36",
"#171041",
"#1c144f",
"#231860",
"#271b6c",
"#2b1d76",
"#33238e",
"#3e2bad",
"#4630c2",
"#4c34d2",
"#5339e7",
"#593df7",
"#6f35f4",
"#832ef2",
"#a521ed",
"#bc18ea",
"#e00be6",
"#ec06e4", 
"#e00be6",
"#bc18ea",
"#a521ed",
"#832ef2",
"#6f35f4",
"#593df7",
"#5339e7",
"#4c34d2",
"#4630c2",
"#3e2bad",
"#33238e",
"#271b6c",
"#231962",
"#1f1657",
"#1b134b",
"#171040",
"#110c2f",
"#000000"
);

// Element behind
// the alpha transparent
// PNG image file.
var elemA = null; 

// Color output element.
var eColorTest = null;

// Maximum color
// array length.
var iCycleArrayLength = aCycle.length;

/**
* function loadGame() saves
* references to the elements 
* we want to modify dynamically.
*/
function loadGame(){

elemA = document.getElementById(
 'a'
);

eColorTest = document.getElementById(
 "color-test"
); 
   
}

Start and Stop the Timer

/**
* Start the timer.
*/
function colorCycleStart(){

 iCycle = 0;
 
 iCycleCount = 0;
 
 if (elemA != null){
 
  timer = setInterval(
  
   function(){
  
   colorCycleRun();
   
  },
   
   64
  ); 
 }    
}

/**
* Stop the timer.
*/
function colorCycleStop(){
if (timer != null){

 clearInterval(
  timer
 );
   
 timer = null;   
}    

// Set the background color 
// to the last color in the cycle.
elemA.style.backgroundColor = "#000000"; 
    
}

Show Colors

function colorCycleRun(){

 if (iCycle >= iCycleArrayLength){
 
  if (iCycleCount >= iCycleMax){
  
   colorCycleStop();
   
   return;
   
  }
  
  else { 
  
   iCycleCount++; 
   
   iCycle = 0;
   
  }
 } 

// Color the PNG image
// file background.
elemA.style.backgroundColor = aCycle[
 iCycle
];   

// Color the div element.
eColorTest.style.backgroundColor = aCycle[
 iCycle
]; 

// Display the hexadecimal
// color.
eColorTest.innerHTML = "Color:<br />"+aCycle[iCycle];

// Increase index into
// array of colors.
iCycle++;
 
}