News Update :

Membuat Efek Salju di Blog

Diposkan oleh : Posted on Sabtu, 17 November 2012 - 9:45 PM with No comments

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 ?

CARA MEMBUAT SNOW EFFECTS :

Copy dan paste javascript di bawah ini dan simpan di bagian body di di antara tag <body> dan tag </body> 

  1. Login ke Blogger.
    • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
    • Tuliskan Password.
    • Klik "Sign in"
  2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
    Klik "Rancangan (Design)".
  3. Kembali halaman baru akan terbuka, klik "Edit HTML".
  4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
    • Backup/Restore Template » berisi fitur untuk melakukan backup template.
    • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
    • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
  5. Cari kode </body> pada "Box Edit Template".
  6. Copy javascript snow effect dan letakkan di atas </body>
  7. Klik "Simpan Template (Save Template)".
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 = "&bull;";
    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>

CATATAN/KETERANGAN :
  1. Anda bisa merubah beberapa variable dalam javascript untuk mendapatkan tampilan berbeda.
  2. Jika anda ingin menggunakan javascript yang sudah di simpan di file hosting (google code, silahkan buka demo dan dapatkan link javascriptnya di sana.
  3. Panduan dan tutorial cara backup template, cari kode di template dan berbagai cara simpan kode di template silahkan buka Special Tutorials di kolom sebelah kiri.
Share this Article on :
no image
Item Reviewed: Membuat Efek Salju di Blog 9 out of 10 based on 10 ratings. 9 user reviews.

0 komentar:

Poskan Komentar

 

© Copyright 2-Bersaudara 2015 | Design by Herdiansyah Hamzah | Editing by 2-Bersaudara.