I made animated background that you can add to your layout ^_^
* Animation will be over your background image/color and under logo/website content
* Works in IE, Firefox, Chrome
* Works fine after resize/scroll browser
Example (text, color, animation speed is configurable):
OTS.ME - Background example
How to add?
1. Above:
Paste:
2. Under:
Paste:
3. Above:
Paste:
* Animation will be over your background image/color and under logo/website content
* Works in IE, Firefox, Chrome
* Works fine after resize/scroll browser
Example (text, color, animation speed is configurable):
OTS.ME - Background example
How to add?
1. Above:
PHP:
</head>
PHP:
<script type="text/javascript">
function getHeight() {
var myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myHeight = document.body.clientHeight;
}
return myHeight
}
var colors = new Array("#009900","#00AA00","#00CC00","#00EE00");
function doAnimObjects() {
var height = getHeight();
var arr = new Array();
if (navigator.userAgent.indexOf('MSIE') !=-1)
arr = document.getElementById("backgroundAnim").childNodes;
else
arr = document.getElementsByName("newAnim");
for(var i = 0; i < arr.length; i++)
{
var obj = arr[i];
var objMargin = parseInt(obj.style.marginTop);
if(objMargin < height)
obj.style.marginTop = (objMargin + 2 + parseInt(obj.style.borderTop)) + "px";
else
{
var rand = Math.floor(Math.random()*4);
obj.style.borderTop = rand + "px";
obj.style.color = colors[rand];
obj.style.marginTop = "-" + height + "px";
obj.style.marginLeft = Math.floor(Math.random()*document.body.clientWidth) + "px";
obj.style.fontSize = (8 + Math.floor(Math.random()*18)) + "px";
}
}
setTimeout(doAnimObjects, 30);
}
</script>
PHP:
<body>
PHP:
<div style="position: absolute; margin-top: 0px; margin-left: 0px">
<div id="backgroundAnim" style="position: fixed; width: 100%; height: 100%" ></div>
</div>
<div style="position: absolute; margin-top: 0px; margin-left: 0px">
PHP:
</body>
PHP:
</div>
<script type="text/javascript">
function startBackgroundAnim() {
for(var i = 0; i < 90; i++)
{
var newdiv = document.createElement(\'div\');
newdiv.style.marginLeft = Math.floor(Math.random()*document.body.clientWidth) + "px";
newdiv.style.marginTop = "-" + Math.floor(Math.random()*document.documentElement.clientHeight*2) + "px";
newdiv.style.fontSize = (8 + Math.floor(Math.random()*18)) + "px";
newdiv.style.position = "absolute";
newdiv.style.textAlign = "center";
var rand = Math.floor(Math.random()*4);
newdiv.style.borderTop = rand + "px";
newdiv.style.color = colors[rand];
newdiv.innerHTML = "M<br />A<br />T<br />R<br />I<br />X";
newdiv.setAttribute("name","newAnim");
document.getElementById("backgroundAnim").appendChild(newdiv);
}
doAnimObjects();
}
window.onload = startBackgroundAnim;
</script>
