<head>
<title>Animated Bubbles Motion Using 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();
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>
Hi,
ReplyDeleteWao this is awesome..
Very nice information shared ...
Online learning platform is being widely spread these days because most of the people are very busy and do not have time to travel and attentd regular classes . And everybody wants to learn from best teachers available so that's why they are inclined towards online learning . I myself like to learn online and i have taken many courses online and now planning to do online java training course from http://www.wiziq.com/course/12145-the-6-week-complete-java-primer-with-training-certificate .