Background color changing tiles

Question

This is more of a theoretical question with a few code snipets. I'd like to create a website with a background full of tiles that change constantly in color and shape. A good example are the Windows Phone 8 tiles. Of course later I'd like to create a more complex effect, but I'd like to know how you would go about changing every 50x50px square individualy, for example.

This is a code snipet for changing the background color constantly.

.animate {
    height: 200px;
    width: 400px;
    border: 1px solid #000;
    -webkit-animation: animate_bg 5s;
    animation: animate_bg 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@keyframes animate_bg {
    0%   {background:red;}
    50%  {background:green;}
    100% {background:blue;}
}

@keyframes animate_bg {
    0%   {background:red;}
    50%  {background:green;}
    100% {background:blue;}
}

@-webkit-keyframes animate_bg {
    0%   {background:red;}
    50%  {background:green;}
    100% {background:blue;}
}

Now do I need to create this effect again and again and again until it fills up my page, or is there a better way of doing so? Maybe there's a 'random repeat' function similar to bg-repeat? Note: Tiles should be randomized in starting color.

Thank you!

Shomz · Accepted Answer · 2014-11-25T14:47:20.537

There is certainly a better way (as there usually is when you find yourself repeating code).

Use CSS transitions for the animation effect, define a lot of classes - each for a different color, and randomly assign them with JavaScript.

Here's a simple example showing what I wrote above in action. It supports unlimited number of tiles and colors.

var tiles = document.getElementsByClassName('tile');
var totalTypes = 5;
var interval = 1000;

function paintTiles() {
  for (var i = 0; i < tiles.length; i++) {
    tiles[i].className = 'tile'; // reset classes
    tiles[i].classList.add('type' + Math.ceil(Math.random() * totalTypes));
  }
}
paintTiles(); // initial paint
setInterval(paintTiles, interval); // paint afterwards

.tile {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  transition: 1s all linear;
}

.type1 {
  background: red;
}

.type2 {
  background: blue;
}

.type3 {
  background: green;
}

.type4 {
  background: yellow;
}

.type5 {
  background: chucknorris; 
  /*  
  :)
  inspired by: http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color
  */
}

<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<br>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>

UPDATE

Alright, here it is dynamically adding tiles with JS, although doing it from the server-side might be a better idea. Of course, you can control how many tiles you want, I put 10 just as an example.

var totalTiles = 10;
var tiles = [];
var totalTypes = 5;
var interval = 1000;


function addTiles() {
  for (var i = 0; i < totalTiles; i++) {
    var div = document.createElement('div');
    div.className = 'tile';
    div.classList.add('type' + Math.ceil(Math.random() * totalTypes));
    document.body.appendChild(div);
  }
  tiles = document.getElementsByClassName('tile');
}

function paintTiles() {
  for (var i = 0; i < tiles.length; i++) {
    tiles[i].className = 'tile'; // reset classes
    tiles[i].classList.add('type' + Math.ceil(Math.random() * totalTypes));
  }
}
paintTiles(); // initial paint
setInterval(paintTiles, interval); // paint afterwards

.tile {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid black;
  transition: 1s all linear;
}

.type1 {
  background: red;
}

.type2 {
  background: blue;
}

.type3 {
  background: green;
}

.type4 {
  background: yellow;
}

.type5 {
  background: chucknorris; 
  /*  
  :)
  inspired by: http://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color
  */
}

<button onclick="addTiles()">Add 10 Tiles</button><br />

So if I was to fill the whole background with tiles, would I have to copy/paste the
200 times? Isn't there a better way? — Bogdan Lazar, Nov 25 '14 at 13:38
Of course there is a better way. You can use JS or a server-side language to generate them. Want me to show you how? — Shomz, Nov 25 '14 at 13:41

Background color changing tiles

1 Answers1