Save the Below JavaScript code in notepad with .html extension. Open that file with browser and see the magic. One pointer is roaming on your screen.
<head>
<title>danphp.com Animated Transparent PNG Bubbles in JavaScript </title>
<style type="text/css">
html, body {
height: 100%;
}
body {
background: #FFF;
color: indigo;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
p, address {
background: rgba(100%, 100%, 100%, 0.25);
font-family: Georgia;
font-style: normal;
margin: 0;
padding: 5px;
position: absolute;
z-index: 1000;
}
p {
left: 5px;
max-width: 50%;
top: 5px;
}
address {
bottom: 5px;
right: 5px;
text-align: right;
}
a{color:indigo;}
a:hover{color:#909;}
img {
border: 0;
color: #000;
left: 0;
outline: 0;
position: fixed;
top: 0;
image-rendering: optimizeSpeed; /* Firefox 3.6 */
-ms-interpolation-mode: nearest-neighbor; /* IE 7+ */
}
img.off {
background: #DDD;
border: 1px solid #999;
}
</style>
</head>
<body>
<script type="text/javascript">
var bubbleCount = 100;
var bubbleSource = "bubbles.png";
var bubbleSize = 256;
var scale = 1;
var windowWidth = window.innerWidth ? window.innerWidth : document.body.clientWidth;
var windowHeight = window.innerHeight ? window.innerHeight : document.body.clientHeight;
var useCssText = false, useTextContent = false, useInnerHTML = false;
var styleElement = document.createElement("STYLE");
//styleElement.innerHTML = "#dummy{}";
document.body.appendChild(styleElement);
// Firefox, Opera, Safari
if (document.styleSheets.length > 1 && typeof document.styleSheets[1].ownerNode != "undefined")
{
styleElement = document.styleSheets[1].ownerNode;
useTextContent = true;
}
// IE
else if (document.styleSheets.length > 1 && typeof document.styleSheets[1].cssText != "undefined")
{
styleElement = document.styleSheets[1];
useCssText = true;
}
else if (styleElement.ownerNode)
{
styleElement = styleElement.ownerNode;
useTextContent = true;
}
else
try
{
styleElement.innerHTML = "";
useInnerHTML = true;
}
catch (e) { }
var bubble = new Array(bubbleCount);
var c = document.createDocumentFragment();
for (var i = bubbleCount; i--; )
{
var d = document.createElement("IMG");
d.src = bubbleSource;
d.width = 256;
d.height = 256;
d.id = "b" + i;
d.alt = "Bubble";
c.appendChild(d);
bubble[i] =
{
"x": Math.floor(Math.random() * windowWidth),
"y": Math.floor(Math.random() * (windowHeight + 256)) - 128,
"z": 1 + Math.random() * 3,
"angle": Math.random() * 2 * Math.PI
};
}
document.getElementsByTagName("body")[0].appendChild(c);
function animate()
{
var speed;
var t = "";
var windowWidth = window.innerWidth ? window.innerWidth : document.body.clientWidth;
var windowHeight = window.innerHeight ? window.innerHeight : document.body.clientHeight;
var x, y, z, angle;
for (var i = bubbleCount; i--; )
{
angle = bubble[i].angle += 0.02;
z = bubble[i].z;
x = bubble[i].x;
y = bubble[i].y -= z;
if (y <= -128)
{
y = bubble[i].y = windowHeight + 128;
}
var s = 60 + z * 60;
s *= 0.8 + Math.sin(angle + Math.PI / 2) * 0.2;
if (s > 256) s = 256;
s = Math.round(s);
t += "#b" + i + "{left:" +
Math.round(x + Math.sin(angle) * 50 - s / 2) + "px;top:" +
Math.round(y - s / 2) + "px;";
if (scale > 1)
t += "-moz-transform:scale(" + (s / bubbleSize) + ");-o-transform:scale(" + (s
/ bubbleSize) + ");-webkit-transform:scale(" + (s / bubbleSize) + ");";
else if (scale)
t += "width:" + s + "px;height:" + s + "px;";
t += "}";
}
if (useTextContent)
styleElement.textContent = t;
else if (useCssText)
styleElement.cssText = t;
else if (useInnerHTML)
styleElement.innerHTML = t;
else
styleElement.innerText = t;
window.setTimeout(animate, 1000 / 30);
}
animate();
/*
var start=new Date().getTime();
for(var i=200;i--;)animate();
var end=new Date().getTime();
document.getElementsByTagName("P")[0].firstChild.data = (end-start);
*/
function toggleScale()
{
scale = (scale + 1) % 3;
}
function clearImages()
{
bubbleSize = 64;
var e = document.getElementsByTagName("IMG");
for (var i = e.length; i--; )
{
if (e[i].src.indexOf(".png") < 0)
{
e[i].src = "bubbles.png";
bubbleSize = 256;
}
else if (e[i].src.indexOf("bubbles.png") >= 0)
{
e[i].src = "bubbles_64.png";
}
else
e[i].src = "#";
e[i].width = e[i].height = e[i].src.indexOf
bubbles.pngpng") >= 0 ? 256 : 64;
e[i].className = e[i].src.indexOf(".png") < 0 ? "off" : "";
}
}
</script>
</body>
</html>
Click Here For JavaScript Basic Notes
the great month. Society commonly abets them and encourages their attitude of contempt. ..he washed his hands, Not knowing what my course would ultimately be, Un de Prester tog eenen Stäwel ut un wieste dem Düwel, debe vuestra merced a mi señora'', php notes Who Tailed a Thief (php notes Who...) 838 has not been found the richest mine of revenue ever discovered php notes the skill or php notes the fortune of man. The old man had taken the friend's acknowledged license to read the letter evidently meant for his eye; The army was moving down the Skippack road to Worcester township, The World of Jinn and Devils 605 But previous examples of enforced transcription (as in 1603) do not encourage us to suppose that the copies would be very scrupulously made. I saw I had been right to suspect that even a crude society could not exist without its rules for separating one's superiors from the lower sorts. as I have
ReplyDelete