Animations with CSS3 and PHP

[loueed]

http://louisdickinson.com/extra/

[onion2k]

What part does PHP play?

[obayesshelton → onion2k]

It has the extension .php haha

[loueed → obayesshelton]

i used a for loop to print out the div's with a random color and increment left: by 0.5 at a time. It also lets me enter in the increment value via a html form. Im pretty new to coding and you both seem knowledgeable, how would you go about to make the same effect in a web browser

[onion2k → loueed]

A very quick jQuery hack to get the divs on to the screen in a nice rainbow of colours:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>

  var config = { count:1000, r:255, g:0, b:255 }

  var steps = config.count;
  var step = Math.floor(255 / Math.ceil(steps/5));
  var s = 0;
  var r = config.r;
  var g = config.g;
  var b = config.b;

  for(x=0; x<steps; x++) {

    if (x % Math.ceil(steps/5) == 0) { s++; }

    switch (s) {

        case 1: b -= step; break;
        case 2: g += step; break;
        case 3: r -= step; break;
        case 4: b += step; break;
        case 5: g -= step; break;

    }

    $('<div style="background-color: #'+toHex(r)+toHex(g)+toHex(b)+'"></div>').appendTo('body');

  }

  function toHex(n) {
	  z = '0';
	  width = 2;
	  n = Math.floor(n).toString(16);
	  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
  }

</script>