Berbeda dengan Money Rain Effects yang harus menggunakan image untuk menciptakan sebuah effek, Snow Effects mampu menciptakan efek hujan salju tanpa harus menambahkan gambar/image. Efek ini benar-benar murni menggunakan javascript. Seperti apa tampilan sebuah blog dengan Snow Effect di dalamnya ? KLIK DEMO untuk melihat hasilnya!
Copy dan paste javascript di bawah ini dan simpan di bagian body di di antara tag <body> dan tag </body>
Javascript Snow Effect :
<script type="text/javascript">
//<![CDATA[
var snowStorm = null;
function SnowStorm() {
this.flakesMax = 150;
this.flakesMaxActive = 64;
this.animationInterval = 33;
this.flakeBottom = null;
this.targetElement = null;
this.followMouse = true;
this.snowColor = "#fff";
this.snowCharacter = "•";
this.snowStick = true;
this.useMeltEffect = true;
this.useTwinkleEffect = false;
this.usePositionFixed = false;
this.flakeLeftOffset = 0;
this.flakeRightOffset = 0;
this.flakeWidth = 8;
this.flakeHeight = 8;
this.vMaxX = 5;
this.vMaxY = 4;
this.zIndex = 0;
var x = (typeof(window.attachEvent) == "undefined" ?
function (E, s, i) {
return E.addEventListener(s, i, false)
}: function (E, s, i) {
return E.attachEvent("on" + s, i)
});
var A = (typeof(window.attachEvent) == "undefined" ?
function (E, s, i) {
return E.removeEventListener(s, i, false)
}: function (E, s, i) {
return E.detachEvent("on" + s, i)
});
function l(s, i) {
if (isNaN(i)) {
i = 0
}
return (Math.random() * s) + i
}
function y(i) {
return (parseInt(l(2), 10) == 1 ? i * -1 : i)
}
var p = this;
var f = this;
this.timers = [];
this.flakes = [];
this.disabled = false;
this.active = false;
var u = navigator.userAgent.match(/msie/i);
var t = navigator.userAgent.match(/msie 6/i);
var m = (u && (t || navigator.userAgent.match(/msie 5/i)));
var q = navigator.appVersion.match(/windows 98/i);
var n = navigator.userAgent.match(/iphone/i);
var d = (u && document.compatMode == "BackCompat");
var o = ((d || t || n) ? true: false);
var b = null;
var v = null;
var D = null;
var w = null;
var c = null;
var a = null;
var C = 1;
var j = 2;
var h = 6;
var k = false;
var B = (function () {
try {
document.createElement("div").style.opacity = "0.5"
} catch(i) {
return false
}
return true
})();
var e = document.createDocumentFragment();
if (p.flakeLeftOffset === null) {
p.flakeLeftOffset = 0
}
if (p.flakeRightOffset === null) {
p.flakeRightOffset = 0
}
this.meltFrameCount = 20;
this.meltFrames = [];
for (var z = 0; z < this.meltFrameCount; z++) {
this.meltFrames.push(1 - (z / this.meltFrameCount))
}
this.randomizeWind = function () {
c = y(l(p.vMaxX, 0.2));
a = l(p.vMaxY, 0.2);
if (this.flakes) {
for (var s = 0; s < this.flakes.length; s++) {
if (this.flakes[s].active) {
this.flakes[s].setVelocities()
}
}
}
};
this.scrollHandler = function () {
w = (p.flakeBottom ? 0 : parseInt(window.scrollY || document.documentElement.scrollTop || document.body.scrollTop, 10));
if (isNaN(w)) {
w = 0
}
if (!k && !p.flakeBottom && p.flakes) {
for (var s = p.flakes.length; s--;) {
if (p.flakes[s].active === 0) {
p.flakes[s].stick()
}
}
}
};
this.resizeHandler = function () {
if (window.innerWidth || window.innerHeight) {
b = window.innerWidth - (!u ? 16 : 2) - p.flakeRightOffset;
D = (p.flakeBottom ? p.flakeBottom: window.innerHeight)
} else {
b = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth) - (!u ? 8 : 0) - p.flakeRightOffset;
D = p.flakeBottom ? p.flakeBottom: (document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight)
}
v = parseInt(b / 2, 10)
};
this.resizeHandlerAlt = function () {
b = p.targetElement.offsetLeft + p.targetElement.offsetWidth - p.flakeRightOffset;
D = p.flakeBottom ? p.flakeBottom: p.targetElement.offsetTop + p.targetElement.offsetHeight;
v = parseInt(b / 2, 10)
};
this.freeze = function () {
if (!p.disabled) {
p.disabled = 1
} else {
return false
}
for (var s = p.timers.length; s--;) {
clearInterval(p.timers[s])
}
};
this.resume = function () {
if (p.disabled) {
p.disabled = 0
} else {
return false
}
p.timerInit()
};
this.toggleSnow = function () {
if (!p.flakes.length) {
p.start()
} else {
p.active = !p.active;
if (p.active) {
p.show();
p.resume()
} else {
p.stop();
p.freeze()
}
}
};
this.stop = function () {
this.freeze();
for (var s = this.flakes.length; s--;) {
this.flakes[s].o.style.display = "none"
}
A(window, "scroll", p.scrollHandler);
A(window, "resize", p.resizeHandler);
if (!m) {
A(window, "blur", p.freeze);
A(window, "focus", p.resume)
}
};
this.show = function () {
for (var s = this.flakes.length; s--;) {
this.flakes[s].o.style.display = "block"
}
};
this.SnowFlake = function (H, G, i, I) {
var F = this;
var E = H;
this.type = G;
this.x = i || parseInt(l(b - 20), 10);
this.y = (!isNaN(I) ? I: -l(D) - 12);
this.vX = null;
this.vY = null;
this.vAmpTypes = [1, 1.2, 1.4, 1.6, 1.8];
this.vAmp = this.vAmpTypes[this.type];
this.melting = false;
this.meltFrameCount = E.meltFrameCount;
this.meltFrames = E.meltFrames;
this.meltFrame = 0;
this.twinkleFrame = 0;
this.active = 1;
this.fontSize = (10 + (this.type / 5) * 10);
this.o = document.createElement("div");
this.o.innerHTML = E.snowCharacter;
this.o.style.color = E.snowColor;
this.o.style.position = (k ? "fixed": "absolute");
this.o.style.width = E.flakeWidth + "px";
this.o.style.height = E.flakeHeight + "px";
this.o.style.fontFamily = "arial,verdana";
this.o.style.overflow = "hidden";
this.o.style.fontWeight = "normal";
this.o.style.zIndex = E.zIndex;
e.appendChild(this.o);
this.refresh = function () {
if (isNaN(F.x) || isNaN(F.y)) {
return false
}
F.o.style.left = F.x + "px";
F.o.style.top = F.y + "px"
};
this.stick = function () {
if (o || (E.targetElement != document.documentElement && E.targetElement != document.body)) {
F.o.style.top = (D + w - E.flakeHeight) + "px"
} else {
if (E.flakeBottom) {
F.o.style.top = E.flakeBottom + "px"
} else {
F.o.style.display = "none";
F.o.style.top = "auto";
F.o.style.bottom = "0px";
F.o.style.position = "fixed";
F.o.style.display = "block"
}
}
};
this.vCheck = function () {
if (F.vX >= 0 && F.vX < 0.2) {
F.vX = 0.2
} else {
if (F.vX < 0 && F.vX > -0.2) {
F.vX = -0.2
}
}
if (F.vY >= 0 && F.vY < 0.2) {
F.vY = 0.2
}
};
this.move = function () {
var s = F.vX * C;
F.x += s;
F.y += (F.vY * F.vAmp);
if (F.x >= b || b - F.x < E.flakeWidth) {
F.x = 0
} else {
if (s < 0 && F.x - E.flakeLeftOffset < 0 - E.flakeWidth) {
F.x = b - E.flakeWidth - 1
}
}
F.refresh();
var J = D + w - F.y;
if (J < E.flakeHeight) {
F.active = 0;
if (E.snowStick) {
F.stick()
} else {
F.recycle()
}
} else {
if (E.useMeltEffect && F.active && F.type < 3 && !F.melting && Math.random() > 0.998) {
F.melting = true;
F.melt()
}
if (E.useTwinkleEffect) {
if (!F.twinkleFrame) {
if (Math.random() > 0.9) {
F.twinkleFrame = parseInt(Math.random() * 20, 10)
}
} else {
F.twinkleFrame--;
F.o.style.visibility = (F.twinkleFrame && F.twinkleFrame % 2 === 0 ? "hidden": "visible")
}
}
}
};
this.animate = function () {
F.move()
};
this.setVelocities = function () {
F.vX = c + l(E.vMaxX * 0.12, 0.1);
F.vY = a + l(E.vMaxY * 0.12, 0.1)
};
this.setOpacity = function (J, s) {
if (!B) {
return false
}
J.style.opacity = s
};
this.melt = function () {
if (!E.useMeltEffect || !F.melting) {
F.recycle()
} else {
if (F.meltFrame < F.meltFrameCount) {
F.meltFrame++;
F.setOpacity(F.o, F.meltFrames[F.meltFrame]);
F.o.style.fontSize = F.fontSize - (F.fontSize * (F.meltFrame / F.meltFrameCount)) + "px";
F.o.style.lineHeight = E.flakeHeight + 2 + (E.flakeHeight * 0.75 * (F.meltFrame / F.meltFrameCount)) + "px"
} else {
F.recycle()
}
}
};
this.recycle = function () {
F.o.style.display = "none";
F.o.style.position = (k ? "fixed": "absolute");
F.o.style.bottom = "auto";
F.setVelocities();
F.vCheck();
F.meltFrame = 0;
F.melting = false;
F.setOpacity(F.o, 1);
F.o.style.padding = "0px";
F.o.style.margin = "0px";
F.o.style.fontSize = F.fontSize + "px";
F.o.style.lineHeight = (E.flakeHeight + 2) + "px";
F.o.style.textAlign = "center";
F.o.style.verticalAlign = "baseline";
F.x = parseInt(l(b - E.flakeWidth - 20), 10);
F.y = parseInt(l(D) * -1, 10) - E.flakeHeight;
F.refresh();
F.o.style.display = "block";
F.active = 1
};
this.recycle();
this.refresh()
};
this.snow = function () {
var G = 0;
var F = 0;
var H = 0;
var s = null;
for (var E = p.flakes.length; E--;) {
if (p.flakes[E].active == 1) {
p.flakes[E].move();
G++
} else {
if (p.flakes[E].active === 0) {
F++
} else {
H++
}
}
if (p.flakes[E].melting) {
p.flakes[E].melt()
}
}
if (G < p.flakesMaxActive) {
s = p.flakes[parseInt(l(p.flakes.length), 10)];
if (s.active === 0) {
s.melting = true
}
}
};
this.mouseMove = function (s) {
if (!p.followMouse) {
return true
}
var i = parseInt(s.clientX, 10);
if (i < v) {
C = -j + (i / v * j)
} else {
i -= v;
C = (i / v) * j
}
};
this.createSnow = function (s, F) {
for (var E = 0; E < s; E++) {
p.flakes[p.flakes.length] = new p.SnowFlake(p, parseInt(l(h), 10));
if (F || E > p.flakesMaxActive) {
p.flakes[p.flakes.length - 1].active = -1
}
}
f.targetElement.appendChild(e)
};
this.timerInit = function () {
p.timers = (!q ? [setInterval(p.snow, p.animationInterval)] : [setInterval(p.snow, p.animationInterval * 3), setInterval(p.snow, p.animationInterval)])
};
this.init = function () {
p.randomizeWind();
p.createSnow(p.flakesMax);
x(window, "resize", p.resizeHandler);
x(window, "scroll", p.scrollHandler);
if (!m) {
x(window, "blur", p.freeze);
x(window, "focus", p.resume)
}
p.resizeHandler();
p.scrollHandler();
if (p.followMouse) {
x(document, "mousemove", p.mouseMove)
}
p.animationInterval = Math.max(20, p.animationInterval);
p.timerInit()
};
var r = false;
this.start = function (s) {
if (!r) {
r = true
} else {
if (s) {
return true
}
}
if (typeof p.targetElement == "string") {
var i = p.targetElement;
p.targetElement = document.getElementById(i);
if (!p.targetElement) {
throw new Error('Snowstorm: Unable to get targetElement "' + i + '"')
}
}
if (!p.targetElement) {
p.targetElement = (!u ? (document.documentElement ? document.documentElement: document.body) : document.body)
}
if (p.targetElement != document.documentElement && p.targetElement != document.body) {
p.resizeHandler = p.resizeHandlerAlt
}
p.resizeHandler();
p.usePositionFixed = (p.usePositionFixed && !o);
k = p.usePositionFixed;
if (b && D && !p.disabled) {
p.init();
p.active = true
}
};
function g() {
p.start(true)
}
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", g, false);
window.addEventListener("load", g, false)
} else {
x(window, "load", g)
}
}
snowStorm = new SnowStorm();
//]]>
</script>
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » Rabo PON, February, 29, 2012 
