Effect Snow is Efek Salju

Tahun baru akan tiba dan natal juga akan menjelang, pasti identik dengan aksesoris-aksesoris sob. Disini Beben si bloglang anu ganteng kalem tea cuman mau berbagi snow effect (salju) Sebelumnya juga sudah ada sih disini mengenai topic ini ornament happy new year :D Karena BW kesana kemari dan seringnya melihat efek salju, maka bahas snow effect dweeeh :P Sepertinya schillmania menaruh perhatian juga sama tahun baru, coba deh tengok kemari dan sikat emang jika tertarik JavaScript Snow.

Kalau di dynamicdrive efek saljunya yg kecil² sob. Buatan si Kurt Grigg. Jika emang tertarik dengan efek lainnya Dynamic Drive.

Script Salju

<script type='text/javascript'>
//Snow - http://www.btinternet.com/~kurt.grigg/javascript

if ((document.getElementById) &&
window.addEventListener || window.attachEvent){

(function(){

//Configure here.

var num = 50; //Number of flakes
var timer = 30; //setTimeout speed. Varies on different comps
var enableinNS6 = 1 //Enable script in NS6/Mozilla? Snow animation could be slow in those browsers. (1=yes, 0=no).

//End.

var y = [];
var x = [];
var fall = [];
var theFlakes = [];
var sfs = [];
var step = [];
var currStep = [];
var h,w,r;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

if (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
num = 15;

for (i = 0; i < num; i++){
sfs[i] = Math.round(1 + Math.random() * 1);

document.write('<div id="flake'+(idx+i)+'" style="position:absolute;top:0px;left:0px;width:'
+sfs[i]+'px;height:'+sfs[i]+'px;background-color:white;font-size:'+sfs[i]+'px"><\/div>');

currStep[i] = 0;
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 2): Math.round(3 + Math.random() * 2);
step[i] = (sfs[i] == 1)?
0.05 + Math.random() * 0.1 : 0.05 + Math.random() * 0.05 ;
}

if (domWw) r = window;
else{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else{
if (d.body &&
typeof d.body.clientWidth == "number")
r = d.body;
}
}

function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number"){
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh - 5;
w = rw - 5;
}
else{
h = r.clientHeight - 5;
w = r.clientWidth - 5;
}
}

function scrl(yx){
var y,x;
if (domSy){
y = r.pageYOffset;
x = r.pageXOffset;
}
else{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}

function snow(){
var dy,dx;

for (i = 0; i < num; i++){
dy = fall[i];
dx = fall[i] * Math.cos(currStep[i]);

y[i]+=dy;
x[i]+=dx;

if (x[i] >= w || y[i] >= h){
y[i] = -10;
x[i] = Math.round(Math.random() * w);
fall[i] = (sfs[i] == 1)?
Math.round(2 + Math.random() * 3): Math.round(3 + Math.random() * 3);
step[i] = (sfs[i] == 1)?
0.03 + Math.random() * 0.1 : 0.03 + Math.random() * 0.03 ;
}

theFlakes[i].top = y[i] + scrl(0) + pix;
theFlakes[i].left = x[i] + scrl(1) + pix;

currStep[i]+=step[i];
}
setTimeout(snow,timer);
}

function init(){
winsize();
for (i = 0; i < num; i++){
theFlakes[i] = document.getElementById("flake"+(idx+i)).style;
y[i] = Math.round(Math.random()*h);
x[i] = Math.round(Math.random()*w);
}
snow();
}

if (window.addEventListener){
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onresize",winsize);
window.attachEvent("onload",init);
}
})();
}//End.
</script>

Gantilah tulisan script yg berwarna itu sesuai dengan kebutuhan sobat. Jika sobat melihat yg kepunyaan schillmania, saljunya bisa menumpuk dibawah/diakhir monitor dan mengikuti gerak mouse!!! Ini ada yg serupa dengan itu, tapi tidak menumpuk saljunya, cuman ada efek mousenya sama sob :D

<script type='text/javascript'>
//<![CDATA[
var snowStorm = (function(window, document) {
this.flakesMax = 60;
this.flakesMaxActive = 60;
this.animationInterval = 40;
this.excludeMobile = true;
this.flakeBottom = null;
this.followMouse = true;
this.snowColor = '#fff';
this.snowCharacter = '&bull;';
this.snowStick = false;
this.targetElement = null;
this.useMeltEffect = true;
this.useTwinkleEffect = false;
this.usePositionFixed = false;
this.freezeOnBlur = true;
this.flakeLeftOffset = 0;
this.flakeRightOffset = 0;
this.flakeWidth = 5;
this.flakeHeight = 5;
this.vMaxX = 2.5;
this.vMaxY = 2.5;
this.zIndex = 100000;
var s = this,
storm = this,
i, isIE = navigator.userAgent.match(/msie/i),
isIE6 = navigator.userAgent.match(/msie 6/i),
isWin98 = navigator.appVersion.match(/windows 98/i),
isMobile = navigator.userAgent.match(/mobile/i),
isBackCompatIE = (isIE && document.compatMode === 'BackCompat'),
noFixed = (isMobile || isBackCompatIE || isIE6),
screenX = null,
screenX2 = null,
screenY = null,
scrollY = null,
vRndX = null,
vRndY = null,
windOffset = 1,
windMultiplier = 2,
flakeTypes = 6,
fixedForEverything = false,
opacitySupported = (function() {
try {
document.createElement('div').style.opacity = '0.5';
} catch (e) {
return false;
}
return true;
}()),
didInit = false,
docFrag = document.createDocumentFragment();
this.timers = [];
this.flakes = [];
this.disabled = false;
this.active = false;
this.meltFrameCount = 20;
this.meltFrames = [];
this.events = (function() {
var old = (!window.addEventListener && window.attachEvent),
slice = Array.prototype.slice,
evt = {
add: (old ? 'attachEvent' : 'addEventListener'),
remove: (old ? 'detachEvent' : 'removeEventListener')
};

function getArgs(oArgs) {
var args = slice.call(oArgs),
len = args.length;
if (old) {
args[1] = 'on' + args[1];
if (len > 3) {
args.pop();
}
} else if (len === 3) {
args.push(false);
}
return args;
}

function apply(args, sType) {
var element = args.shift(),
method = [evt[sType]];
if (old) {
element[method](args[0], args[1]);
} else {
element[method].apply(element, args);
}
}

function addEvent() {
apply(getArgs(arguments), 'add');
}

function removeEvent() {
apply(getArgs(arguments), 'remove');
}
return {
add: addEvent,
remove: removeEvent
};
}());

function rnd(n, min) {
if (isNaN(min)) {
min = 0;
}
return (Math.random() * n) + min;
}

function plusMinus(n) {
return (parseInt(rnd(2), 10) === 1 ? n * -1 : n);
}
this.randomizeWind = function() {
vRndX = plusMinus(rnd(s.vMaxX, 0.2));
vRndY = rnd(s.vMaxY, 0.2);
if (this.flakes) {
for (var i = 0; i < this.flakes.length; i++) {
if (this.flakes[i].active) {
this.flakes[i].setVelocities();
}
}
}
};
this.scrollHandler = function() {
scrollY = (s.flakeBottom ? 0 : parseInt(window.scrollY || document.documentElement.scrollTop || document.body.scrollTop, 10));
if (isNaN(scrollY)) {
scrollY = 0;
}
if (!fixedForEverything && !s.flakeBottom && s.flakes) {
for (var i = s.flakes.length; i--;) {
if (s.flakes[i].active === 0) {
s.flakes[i].stick();
}
}
}
};
this.resizeHandler = function() {
if (window.innerWidth || window.innerHeight) {
screenX = window.innerWidth - (!isIE ? 16 : 2) - s.flakeRightOffset;
screenY = (s.flakeBottom ? s.flakeBottom : window.innerHeight);
} else {
screenX = (document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth) - (!isIE ? 8 : 0) - s.flakeRightOffset;
screenY = s.flakeBottom ? s.flakeBottom : (document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight);
}
screenX2 = parseInt(screenX / 2, 10);
};
this.resizeHandlerAlt = function() {
screenX = s.targetElement.offsetLeft + s.targetElement.offsetWidth - s.flakeRightOffset;
screenY = s.flakeBottom ? s.flakeBottom : s.targetElement.offsetTop + s.targetElement.offsetHeight;
screenX2 = parseInt(screenX / 2, 10);
};
this.freeze = function() {
if (!s.disabled) {
s.disabled = 1;
} else {
return false;
}
for (var i = s.timers.length; i--;) {
clearInterval(s.timers[i]);
}
};
this.resume = function() {
if (s.disabled) {
s.disabled = 0;
} else {
return false;
}
s.timerInit();
};
this.toggleSnow = function() {
if (!s.flakes.length) {
s.start();
} else {
s.active = !s.active;
if (s.active) {
s.show();
s.resume();
} else {
s.stop();
s.freeze();
}
}
};
this.stop = function() {
this.freeze();
for (var i = this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'none';
}
s.events.remove(window, 'scroll', s.scrollHandler);
s.events.remove(window, 'resize', s.resizeHandler);
if (s.freezeOnBlur) {
if (isIE) {
s.events.remove(document, 'focusout', s.freeze);
s.events.remove(document, 'focusin', s.resume);
} else {
s.events.remove(window, 'blur', s.freeze);
s.events.remove(window, 'focus', s.resume);
}
}
};
this.show = function() {
for (var i = this.flakes.length; i--;) {
this.flakes[i].o.style.display = 'block';
}
};
this.SnowFlake = function(parent, type, x, y) {
var s = this,
storm = parent;
this.type = type;
this.x = x || parseInt(rnd(screenX - 20), 10);
this.y = (!isNaN(y) ? y : -rnd(screenY) - 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 = storm.meltFrameCount;
this.meltFrames = storm.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 = storm.snowCharacter;
this.o.style.color = storm.snowColor;
this.o.style.position = (fixedForEverything ? 'fixed' : 'absolute');
this.o.style.width = storm.flakeWidth + 'px';
this.o.style.height = storm.flakeHeight + 'px';
this.o.style.fontFamily = 'arial,verdana';
this.o.style.overflow = 'hidden';
this.o.style.fontWeight = 'normal';
this.o.style.zIndex = storm.zIndex;
docFrag.appendChild(this.o);
this.refresh = function() {
if (isNaN(s.x) || isNaN(s.y)) {
return false;
}
s.o.style.left = s.x + 'px';
s.o.style.top = s.y + 'px';
};
this.stick = function() {
if (noFixed || (storm.targetElement !== document.documentElement && storm.targetElement !== document.body)) {
s.o.style.top = (screenY + scrollY - storm.flakeHeight) + 'px';
} else if (storm.flakeBottom) {
s.o.style.top = storm.flakeBottom + 'px';
} else {
s.o.style.display = 'none';
s.o.style.top = 'auto';
s.o.style.bottom = '0px';
s.o.style.position = 'fixed';
s.o.style.display = 'block';
}
};
this.vCheck = function() {
if (s.vX >= 0 && s.vX < 0.2) {
s.vX = 0.2;
} else if (s.vX < 0 && s.vX > -0.2) {
s.vX = -0.2;
}
if (s.vY >= 0 && s.vY < 0.2) {
s.vY = 0.2;
}
};
this.move = function() {
var vX = s.vX * windOffset,
yDiff;
s.x += vX;
s.y += (s.vY * s.vAmp);
if (s.x >= screenX || screenX - s.x < storm.flakeWidth) {
s.x = 0;
} else if (vX < 0 && s.x - storm.flakeLeftOffset < 0 - storm.flakeWidth) {
s.x = screenX - storm.flakeWidth - 1;
}
s.refresh();
yDiff = screenY + scrollY - s.y;
if (yDiff < storm.flakeHeight) {
s.active = 0;
if (storm.snowStick) {
s.stick();
} else {
s.recycle();
}
} else {
if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random() > 0.998) {
s.melting = true;
s.melt();
}
if (storm.useTwinkleEffect) {
if (!s.twinkleFrame) {
if (Math.random() > 0.9) {
s.twinkleFrame = parseInt(Math.random() * 20, 10);
}
} else {
s.twinkleFrame--;
s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame % 2 === 0 ? 'hidden' : 'visible');
}
}
}
};
this.animate = function() {
s.move();
};
this.setVelocities = function() {
s.vX = vRndX + rnd(storm.vMaxX * 0.12, 0.1);
s.vY = vRndY + rnd(storm.vMaxY * 0.12, 0.1);
};
this.setOpacity = function(o, opacity) {
if (!opacitySupported) {
return false;
}
o.style.opacity = opacity;
};
this.melt = function() {
if (!storm.useMeltEffect || !s.melting) {
s.recycle();
} else {
if (s.meltFrame < s.meltFrameCount) {
s.meltFrame++;
s.setOpacity(s.o, s.meltFrames[s.meltFrame]);
s.o.style.fontSize = s.fontSize - (s.fontSize * (s.meltFrame / s.meltFrameCount)) + 'px';
s.o.style.lineHeight = storm.flakeHeight + 2 + (storm.flakeHeight * 0.75 * (s.meltFrame / s.meltFrameCount)) + 'px';
} else {
s.recycle();
}
}
};
this.recycle = function() {
s.o.style.display = 'none';
s.o.style.position = (fixedForEverything ? 'fixed' : 'absolute');
s.o.style.bottom = 'auto';
s.setVelocities();
s.vCheck();
s.meltFrame = 0;
s.melting = false;
s.setOpacity(s.o, 1);
s.o.style.padding = '0px';
s.o.style.margin = '0px';
s.o.style.fontSize = s.fontSize + 'px';
s.o.style.lineHeight = (storm.flakeHeight + 2) + 'px';
s.o.style.textAlign = 'center';
s.o.style.verticalAlign = 'baseline';
s.x = parseInt(rnd(screenX - storm.flakeWidth - 20), 10);
s.y = parseInt(rnd(screenY) * -1, 10) - storm.flakeHeight;
s.refresh();
s.o.style.display = 'block';
s.active = 1;
};
this.recycle();
this.refresh();
};
this.snow = function() {
var active = 0,
used = 0,
waiting = 0,
flake = null,
i;
for (i = s.flakes.length; i--;) {
if (s.flakes[i].active === 1) {
s.flakes[i].move();
active++;
} else if (s.flakes[i].active === 0) {
used++;
} else {
waiting++;
}
if (s.flakes[i].melting) {
s.flakes[i].melt();
}
}
if (active < s.flakesMaxActive) {
flake = s.flakes[parseInt(rnd(s.flakes.length), 10)];
if (flake.active === 0) {
flake.melting = true;
}
}
};
this.mouseMove = function(e) {
if (!s.followMouse) {
return true;
}
var x = parseInt(e.clientX, 10);
if (x < screenX2) {
windOffset = -windMultiplier + (x / screenX2 * windMultiplier);
} else {
x -= screenX2;
windOffset = (x / screenX2) * windMultiplier;
}
};
this.createSnow = function(limit, allowInactive) {
for (var i = 0; i < limit; i++) {
s.flakes[s.flakes.length] = new s.SnowFlake(s, parseInt(rnd(flakeTypes), 10));
if (allowInactive || i > s.flakesMaxActive) {
s.flakes[s.flakes.length - 1].active = -1;
}
}
storm.targetElement.appendChild(docFrag);
};
this.timerInit = function() {
s.timers = (!isWin98 ? [setInterval(s.snow, s.animationInterval)] : [setInterval(s.snow, s.animationInterval * 3), setInterval(s.snow, s.animationInterval)]);
};
this.init = function() {
for (var i = 0; i < s.meltFrameCount; i++) {
s.meltFrames.push(1 - (i / s.meltFrameCount));
}
s.randomizeWind();
s.createSnow(s.flakesMax);
s.events.add(window, 'resize', s.resizeHandler);
s.events.add(window, 'scroll', s.scrollHandler);
if (s.freezeOnBlur) {
if (isIE) {
s.events.add(document, 'focusout', s.freeze);
s.events.add(document, 'focusin', s.resume);
} else {
s.events.add(window, 'blur', s.freeze);
s.events.add(window, 'focus', s.resume);
}
}
s.resizeHandler();
s.scrollHandler();
if (s.followMouse) {
s.events.add(isIE ? document : window, 'mousemove', s.mouseMove);
}
s.animationInterval = Math.max(20, s.animationInterval);
s.timerInit();
};
this.start = function(bFromOnLoad) {
if (!didInit) {
didInit = true;
} else if (bFromOnLoad) {
return true;
}
if (typeof s.targetElement === 'string') {
var targetID = s.targetElement;
s.targetElement = document.getElementById(targetID);
if (!s.targetElement) {
throw new Error('Snowstorm: Unable to get targetElement "' + targetID + '"');
}
}
if (!s.targetElement) {
s.targetElement = (!isIE ? (document.documentElement ? document.documentElement : document.body) : document.body);
}
if (s.targetElement !== document.documentElement && s.targetElement !== document.body) {
s.resizeHandler = s.resizeHandlerAlt;
}
s.resizeHandler();
s.usePositionFixed = (s.usePositionFixed && !noFixed);
fixedForEverything = s.usePositionFixed;
if (screenX && screenY && !s.disabled) {
s.init();
s.active = true;
}
};

function doStart() {
if ((this.excludeMobile && !isMobile) || !this.excludeMobile) {
window.setTimeout(function() {
s.start(true);
}, 20);
}
s.events.remove(window, 'load', doStart);
}
s.events.add(window, 'load', doStart, false);
return this;
}(window, document));
//]]>
</script>

Segitu saja ah BW effect snow buat blogspot. Tekniknya yah Add a Gadget ► HTML/Javascript hihihi :P Atur-atur deh, mo dihostingkan atau dibukake saja itu scriptnya :))
See you :-h \m/