Thứ Tư, 26 tháng 6, 2013

Giao diện tuyết rơi cho blog

Có rất nhiều bạn muốn trang trí cho blog của mình thêm sinh động và bắt mắt nhất, trong bài viết lần này mình xin chia sẻ hiệu ứng tuyết rơi cho blog một cách đơn giản và chi tiết nhất.
Công cụ cần có: bạn cần đăng ký một tài khoản blog. Rồi bạn đăng nhập vào tài khoán muốn chỉnh sửa, nào  cùng mạnh làm theo các bước sau: 
Bước 1: Trong giao diện tổng quan bạn chọn ---> Bố cục

hiệu ứng tuyết rơi cho blog
Bước 2: Trong phần bố cục bạn chọn ---> thêm tiện ích

hiệu ứng tuyết rơi cho blog 01

Bước 3: Chọn thêm tiện ích và tìm đến dòng ---->HTML/Javascript

hiệu ứng tuyết rơi cho blog 02

Bước 4: Chỉnh sửa đoạn mã HTML

hiệu ứng tuyết rơi cho blog 03

Bạn thêm đoạn Code sau vào nhé"
<!-- Hiệu ứng tuyết rơi cho blog-->
<script type='text/javascript'>
//<![CDATA[
var snowmax = 30; // Slượng tuyết
var snowcolor = new Array("#aaaacc", "#ddddFF", "#ccccDD");
var snowtype = new Array("Arial Black", "Arial Narrow", "Times", "Comic Sans MS");
var snowletter = "*"; //Hình tuyết, có th thay thành du chm “.” hay các kí tkhác
var sinkspeed = 0.9; //               Tốc độ rơi của tuyết
var snowmaxsize = 30; //           Kích thước hạt tuyết to nhất
var snowminsize = 10; //             Kích thước hạt tuyết nhỏ nhất
var snowingzone = 1;
var snow = new Array();
var marginbottom;
var marginright;
var ScrollTop;
var timer;
var i_snow = 0;
var x_mv = new Array();
var crds = new Array();
var lftrght = new Array();
var browserinfos = navigator.userAgent;
var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/);
var ns6 = document.getElementById && !document.all;
var opera = browserinfos.match(/Opera/);
var browserok = ie5 || ns6 || opera;
function randommaker(a)
{
    rand = Math.floor(a * Math.random());
    return rand
}
 function iecompattest()
{
 return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}
 function InitHeight() {
 if (ie5 || opera) {
  marginbottom = iecompattest().clientHeight + 5; //clientHeight;
  marginright = iecompattest().scrollWidth + 5; //clientWidth
 }
 else {
  if (ns6) {
   marginbottom = self.innerHeight;
   marginright = self.innerWidth
  }
 }
 ScrollTop = document.body.scrollTop;
 if (ScrollTop == 0) {
  if (window.pageYOffset)
   ScrollTop = window.pageYOffset;
  else
   ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
 }
 marginbottom += ScrollTop;
}
 function initsnow()
{
 InitHeight()
  var a = snowmaxsize - snowminsize;
  for (i = 0;i <= snowmax;i++)
 {
  crds[i] = 0;
  lftrght[i] = Math.random() * 15;
  x_mv[i] = 0.03 + Math.random() / 10;
  snow[i] = document.getElementById("s" + i);
  snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)];
  snow[i].size = randommaker(a) + snowminsize;
  snow[i].style.fontSize = snow[i].size + "px";
  snow[i].style.color = snowcolor[randommaker(snowcolor.length)];
  snow[i].sink = sinkspeed * snow[i].size / 5;
  if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size) }
  if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) }
  if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4 }
  if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2 }
  snow[i].posy =  randommaker(2 * marginbottom - marginbottom - 2 * snow[i].size);
  snow[i].style.left = snow[i].posx + "px";
  snow[i].style.top = snow[i].posy + "px"
  }
  movesnow()
}
 function movesnow()
{
 InitHeight();
 for (i = 0; i <= snowmax; i++)
 {
  crds[i] += x_mv[i];
  snow[i].posy += snow[i].sink;
  snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + "px";
  snow[i].style.top = snow[i].posy + "px";
  if (snow[i].posy >= marginbottom - 2 * snow[i].size || parseInt(snow[i].style.left) > (marginright - 3 * lftrght[i]))
  {
   if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size) }
   if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) }
   if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4 }
   if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2 }
   snow[i].posy = ScrollTop
  }
 }
 var a = setTimeout("movesnow()", 60)
}
function hidesnow()
{
 if (window.timer) { clearTimeout(timer) }
 for (i = 0;i <= snowmax;i++)
 {
  document.getElementById("s" + i).style.visibility = "hidden"
 }
}
 for (i = 0;i <= snowmax;i++)
{
 document.write('<div id="s' + i + '" style="POSITION: absolute; Z-INDEX: 9' + i + "; VISIBILITY: visible; TOP:-" + snowmaxsize + 'px; LEFT: 15px;">' + snowletter + "</div>")
}
if (browserok)
{ initsnow() }
else
{ document.write('Votre navigateur ne supporte pas ce Javascript, ') };
//]]>
</script>
Bước 5: Ra màn hình rồi xem kết quả thôi nào


Sao rơi theo trỏ chuột

Các bạn cũng thực hiện các bước giống như trên nhe, chỉ khác bạn thêm mới html rồi cho hiệu ứng mới này thôi. Rồi chèn thêm đoạn code này vào nhé

<!-- Sao rơi theo trỏ chuột -->
<script type='text/javascript'> 
// <![CDATA[ 
var colour="#EF6B7B"; // Mã màu sao rơi
var sparkles=80; 
var x=ox=400; 
var y=oy=300; 
var swide=800; 
var shigh=600; 
var sleft=sdown=0; 
var tiny=new Array(); 
var star=new Array(); 
var starv=new Array(); 
var starx=new Array(); 
var stary=new Array(); 
var tinyx=new Array(); 
var tinyy=new Array(); 
var tinyv=new Array(); 
window.onload=function() { if (document.getElementById) { 
var i, rats, rlef, rdow; 
for (var i=0; i<sparkles; i++) { 
var rats=createDiv(3, 3); 
rats.style.visibility="hidden"; 
document.body.appendChild(tiny[i]=rats); 
starv[i]=0; 
tinyv[i]=0; 
var rats=createDiv(5, 5); 
rats.style.backgroundColor="transparent"; 
rats.style.visibility="hidden"; 
var rlef=createDiv(1, 5); 
var rdow=createDiv(5, 1); 
rats.appendChild(rlef); 
rats.appendChild(rdow); 
rlef.style.top="2px"; 
rlef.style.left="0px"; 
rdow.style.top="0px"; 
rdow.style.left="2px"; 
document.body.appendChild(star[i]=rats);}set_width(); 
sparkle();}} 
function sparkle() {var c; 
if (x!=ox || y!=oy) { 
ox=x;oy=y; 
for (c=0; c<sparkles; c++) if (!starv[c]) { 
star[c].style.left=(starx[c]=x)+"px"; 
star[c].style.top=(stary[c]=y)+"px"; 
star[c].style.clip="rect(0px, 5px, 5px, 0px)"; 
star[c].style.visibility="visible"; 
starv[c]=50; 
break;}}for (c=0; c<sparkles; c++) { 
if (starv[c]) update_star(c); 
if (tinyv[c]) update_tiny(c);} 
setTimeout("sparkle()", 40);}function update_star(i) { 
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; 
if (starv[i]) { 
stary[i]+=1+Math.random()*3; 
if (stary[i]<shigh+sdown) { 
star[i].style.top=stary[i]+"px"; 
starx[i]+=(i%5-2)/5; 
star[i].style.left=starx[i]+"px";}else { 
star[i].style.visibility="hidden"; 
starv[i]=0; 
return;}}else {tinyv[i]=50; 
tiny[i].style.top=(tinyy[i]=stary[i])+"px"; 
tiny[i].style.left=(tinyx[i]=starx[i])+"px"; 
tiny[i].style.width="2px"; 
tiny[i].style.height="2px"; 
star[i].style.visibility="hidden"; 
tiny[i].style.visibility="visible"}} 
function update_tiny(i) { 
if (--tinyv[i]==25) { 
tiny[i].style.width="1px"; 
tiny[i].style.height="1px";} 
if (tinyv[i]) { 
tinyy[i]+=1+Math.random()*3; 
if (tinyy[i]<shigh+sdown) { 
tiny[i].style.top=tinyy[i]+"px"; 
tinyx[i]+=(i%5-2)/5; 
tiny[i].style.left=tinyx[i]+"px";}else { 
tiny[i].style.visibility="hidden"; 
tinyv[i]=0; 
return;}}else tiny[i].style.visibility="hidden";} 
document.onmousemove=mouse; 
function mouse(e) { 
set_scroll(); 
y=(e)?e.pageY:event.y+sdown; 
x=(e)?e.pageX:event.x+sleft;} 
function set_scroll() { 
if (typeof(self.pageYOffset)=="number") { 
sdown=self.pageYOffset; 
sleft=self.pageXOffset;} 
else if (document.body.scrollTop || document.body.scrollLeft) { 
sdown=document.body.scrollTop; 
sleft=document.body.scrollLeft;} 
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { 
sleft=document.documentElement.scrollLeft; 
sdown=document.documentElement.scrollTop;}else {sdown=0;sleft=0;}} 
window.onresize=set_width; 
function set_width() { 
if (typeof(self.innerWidth)=="number") { 
swide=self.innerWidth; 
shigh=self.innerHeight;} 
else if (document.documentElement && document.documentElement.clientWidth) { 
swide=document.documentElement.clientWidth; 
shigh=document.documentElement.clientHeight;}else if (document.body.clientWidth) { 
swide=document.body.clientWidth; 
shigh=document.body.clientHeight;}} 
function createDiv(height, width) { 
var div=document.createElement("div"); 
div.style.position="absolute"; 
div.style.height=height+"px"; 
div.style.width=width+"px"; 
div.style.overflow="hidden"; 
div.style.backgroundColor=colour; 
return (div);}
// ]]> 
</script>

Ra ngoài màn hình rồi tận hưởng thành quả thôi nào; 

hiệu ứng tuyết rơi cho blog 04

Socializer Widget By Blogger Yard
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 nhận xét:

Đăng nhận xét