Sprite Background HTML Page Change-Effect

Readme
JavaScript 89 lines
HTML 0 lines
CSS 50 lines

Randomly changes the sprite-tiled div element for awesome page background possibilities. No HTML5 required. Only normal JS and CSS using a "sprite sheet".

Sprite Background HTML Page Change-Effect

/* ================================================================================ 
            
                        R O L L O V E R  T O  C H A N G E  T I L E S 
            
          ================================================================================ */

// create the tile sets
var set_colorful = Array("blue","golden","silver","red");
var set_greys = Array("grey1","grey2","grey3","grey4");
var rand = 0;
var newtile = '';
var tileset = set_greys;// pick which array tile set to play with

function changeTile(id){// change to a different class on rollover
  rand = Math.floor ( Math.random() * tileset.length );
  newtile = "sprite tile "+tileset[rand];
  document.getElementById(id).setAttribute("class", newtile);
  // use the box to trace...
  //document.getElementById('trace_id').innerHTML = 'Tile '+id+' changed to '+newtile+'.';   
  //document.getElementById('trace_id').innerHTML = 'testing here. . .';
}

/* =============================================================================
            
                      A U T O M A T I C  T I L E  C H A N G E R 
            
       ================================================================================ */

/* check server at regular interval for newest posts 'LIVE' */
var secs = 0.05;// how many seconds between updates
var refresh_time = secs * 1000;
var intID = 0;
intID = setInterval("random_tile_animation()",refresh_time);
var refreshCount = 0;
var randid = 0;
var totalTiles = 506;

function random_tile_animation(){
  // get a random id from the tiles to change
  randid = Math.floor ( Math.random() * totalTiles );
  changeTile('f'+randid);
  refreshCount++;
  // below displays update count (used during testing)
  //document.getElementById("trace_id").innerHTML += ' Total changed: '+refreshCount;
}
/*to stop the interval use: int=window.clearInterval(int) */

/* =============================================================================
            
                    F I L L  I N  T H E  P A G E  W I T H  T I L E S 
            
       ================================================================================ */
    
    
document.write('<div id="sprite_holder">');
  document.write('<div id="sprite_floor">');  
      
var i = 0;

for(i = 0; i < totalTiles; i++){

document.write('<img src="http://www.as3codes.com/images/transparent.gif" class="sprite tile silver" id="f'+i+'"/>');

}

document.write('</div>');
  
    
document.write('</div>');

</div>
    
   
    
    
    
</div>

Sprite Background HTML Page Change-Effect

body { background-color: #DDDDDD; font: 13pt Microsoft Sans Serif; }

/* BEGIN SPRITE SURFACE SPREAD */
#sprite_holder{
  position:relative;
  margin:0 auto;
  margin-top:10px;
  width:920px;/*920*/
  height:880px;/*880*/
  border:solid 1px #AB9A74;
  background-color:#ECE9D8;
}
#sprite_floor{
  
}

.sprite {
  background:url(http://www.as3codes.com/images/sprite_sheet1.png);
}
.tile {
  height:40px;
}
.icon {
  height:61px;
}

/* Tiles  x first, y second */
.blue {width:40px; background-position:0px -80px;}
.golden {width:40px; background-position:-40px -80px;}
.silver {width:40px; background-position:-80px -80px;}
.red {width:40px; background-position:-120px -80px;}

/*greyscale 4 tiles (light to dark)*/
.grey1 {width:40px; background-position:0px -40px;}
.grey2 {width:40px; background-position:-40px -40px;}
.grey3 {width:40px; background-position:-80px -40px;}
.grey4 {width:40px; background-position:-120px -40px;}

/* Icons */
.health {width:20px;}
.activityMonitor {width:20px;}
.dashboard {width:20px;}
.quicktime {width:20px;}
.scanner {width:20px;}

/*    END SPRITE AREA       */

Randomly changes the sprite-tiled div element for awesome page background possibilities. No HTML5 required. Only normal JS and CSS using a "sprite sheet". /* ================================================================================ R O L L O V E R T O C H A N G E T I L E S ================================================================================ */ // create the tile sets var set_colorful = Array("blue","golden","silver","red"); var set_greys = Array("grey1","grey2","grey3","grey4"); var rand = 0; var newtile = ''; var tileset = set_greys;// pick which array tile set to play with function changeTile(id){// change to a different class on rollover rand = Math.floor ( Math.random() * tileset.length ); newtile = "sprite tile "+tileset[rand]; document.getElementById(id).setAttribute("class", newtile); // use the box to trace... //document.getElementById('trace_id').innerHTML = 'Tile '+id+' changed to '+newtile+'.'; //document.getElementById('trace_id').innerHTML = 'testing here. . .'; } /* ============================================================================= A U T O M A T I C T I L E C H A N G E R ================================================================================ */ /* check server at regular interval for newest posts 'LIVE' */ var secs = 0.05;// how many seconds between updates var refresh_time = secs * 1000; var intID = 0; intID = setInterval("random_tile_animation()",refresh_time); var refreshCount = 0; var randid = 0; var totalTiles = 506; function random_tile_animation(){ // get a random id from the tiles to change randid = Math.floor ( Math.random() * totalTiles ); changeTile('f'+randid); refreshCount++; // below displays update count (used during testing) //document.getElementById("trace_id").innerHTML += ' Total changed: '+refreshCount; } /*to stop the interval use: int=window.clearInterval(int) */ /* ============================================================================= F I L L I N T H E P A G E W I T H T I L E S ================================================================================ */ document.write('<div id="sprite_holder">'); document.write('<div id="sprite_floor">'); var i = 0; for(i = 0; i < totalTiles; i++){ document.write('<img src="http://www.as3codes.com/images/transparent.gif" class="sprite tile silver" id="f'+i+'"/>'); } document.write('</div>'); document.write('</div>'); </div> </div> body { background-color: #DDDDDD; font: 13pt Microsoft Sans Serif; } /* BEGIN SPRITE SURFACE SPREAD */ #sprite_holder{ position:relative; margin:0 auto; margin-top:10px; width:920px;/*920*/ height:880px;/*880*/ border:solid 1px #AB9A74; background-color:#ECE9D8; } #sprite_floor{ } .sprite { background:url(http://www.as3codes.com/images/sprite_sheet1.png); } .tile { height:40px; } .icon { height:61px; } /* Tiles x first, y second */ .blue {width:40px; background-position:0px -80px;} .golden {width:40px; background-position:-40px -80px;} .silver {width:40px; background-position:-80px -80px;} .red {width:40px; background-position:-120px -80px;} /*greyscale 4 tiles (light to dark)*/ .grey1 {width:40px; background-position:0px -40px;} .grey2 {width:40px; background-position:-40px -40px;} .grey3 {width:40px; background-position:-80px -40px;} .grey4 {width:40px; background-position:-120px -40px;} /* Icons */ .health {width:20px;} .activityMonitor {width:20px;} .dashboard {width:20px;} .quicktime {width:20px;} .scanner {width:20px;} /* END SPRITE AREA */