Full version: jsB@nk » Background » Background effect » Colorful Flashing Popsquares
URL: https://www.javascriptbank.com/colorful-flashing-popsquares.html
A small JavaScript code to run the cool awesome JavaScript stage show on your website. This JavaScript converts a simple HTML table into the colorful flashing cells. You may change to many different colors immediately by one click link or wait this JavaScript effect shows.Very nice and stunning to present some hot products on your welcome pages with JavaScript. Let's try some other awesome JavaScript effects: - JavaScript Flashing squares - JavaScript Colorful Object onMouseover
Full version: jsB@nk » Background » Background effect » Colorful Flashing Popsquares
URL: https://www.javascriptbank.com/colorful-flashing-popsquares.html
<script type="text/javascript"> // Copyright 2007 Christopher Thomas // Feel free to do what you want with this, so long as you either // preserve this notice, or a link back to this page.var d;var nodes = [];var hue = 0;var doHue = true;var table;function go() {d = document.getElementById('thediv');table = d.parentNode;for (var y=0; y<5; y++){var d2 = document.createElement("tr");for (var x=0; x<5; x++){var n = document.createElement("td");n.setAttribute("width", "20%");d2.appendChild(n);nodes.push(n);n.setAttribute("num", parseInt(Math.random()*255));}d.appendChild(d2);}setInterval(update, 50);}function update() { if (doHue) hue += 0.01; // create the actual color var redHue = (Math.sin(hue)+1)/2; var greenHue = (Math.sin(hue + Math.PI / 3)+1)/2; var blueHue = (Math.sin(hue + Math.PI * 2 / 3)+1)/2; redHue = redHue * redHue; greenHue = greenHue * greenHue; blueHue = blueHue * blueHue; // ensure a strong color var len = Math.sqrt(redHue*redHue + greenHue*greenHue + blueHue*blueHue); redHue /= len; greenHue /= len; blueHue /= len; table.style.backgroundColor = "rgb("+parseInt(redHue*170)+","+ parseInt(greenHue*170)+","+parseInt(blueHue*170)+")"; for (var ntemp in nodes) { var n = nodes[ntemp]; // stupid MSIE doesn't do for each var c = parseInt(n.getAttribute("num")); c += (Math.random() * 2 - 1)*8; c = Math.min(255, Math.max(90, parseInt(c))); n.setAttribute("num", c); var r = parseInt(c*redHue); var g = parseInt(c*greenHue); var b = parseInt(c*blueHue); n.style.backgroundColor = "rgb("+r+","+g+","+b+")"; }}window.onload = go;</script><table width="100%" height="100%" cellspacing="1" style="background-color: #0000AA;margin:0px;padding:0px;"><tbody id="thediv"></tbody></table> <a href="#" onclick="doHue = !doHue;">Toggle color-cycling</a>