Animations with CSS3 and PHP(louisdickinson.com)
louisdickinson.com
Animations with CSS3 and PHP
http://louisdickinson.com/extra/
4 comments
What part does PHP play?
It has the extension .php haha
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
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>
<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;
}