Hướng dẫn Snow Effect - Hiệu ứng tuyết rơi

[PVS]

Snow Effect - Hiệu ứng tuyết rơi

Hướng dẫn này làm cho diễn đàn của bạn với hiệu ứng bông tuyết rơi

Bước 1: Tạo 1 tập tin .js với tên tùy chỉnh
Mở Notepad++ và dán đoạn code bên dưới vào tập tin .js vừa tạo ở trên rồi lưu lại. (Ví dụ: Snow.js)

// CREDITS:

// Snowmaker Copyright (c) 2003
// Permission given to use the script provided that this notice remains as is.

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=3;

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#FFFFFF");

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("vrinda","verdana", "trebuchet ms", "times new roman", "lucinda sans","impact");

// Set the letter that creates your snowflake (recommended:*)
var snowletter="*";

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.3
// Set the maximal-size of your snowflaxes
var snowmaxsize=48;

// Set the minimal-size of your snowflaxes
var snowminsize=24;

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1;

// duration is time in milliseconds of effect.
var start, duration=10000000;

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////

// Do not edit below this line
var snow=new Array();
var marginbottom;
var marginright;
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(range) {
rand=Math.floor(range*Math.random());
    return rand;
}

function initsnow() {
var d = new Date();
start=d.getTime();
if (ie5 || opera) {
  marginbottom = document.body.clientHeight;
  marginright = document.body.clientWidth;
}
else if (ns6) {
  marginbottom = window.innerHeight;
  marginright = window.innerWidth;
}
var snowsizerange=snowmaxsize-snowminsize
for (var 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(snowsizerange)+snowminsize;
  snow[i].style.fontSize=snow[i].size;
  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(6*marginbottom-marginbottom-6*snow[i].size);
  snow[i].style.left=snow[i].posx+'px';
  snow[i].style.top=snow[i].posy+'px';
}
movesnow();
}

function movesnow() {
for (var 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-6*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=0;
  }
}
var d = new Date();
    if((d.getTime()-start) < duration) {
    var timer=setTimeout("movesnow()",50);
        }
else {
    clearTimeout(timer);
        clearSnow();
        }
}

function clearSnow() {
var spans=document.body.getElementsByTagName('span');
var snowElms=[];
for(var i=0; i<spans.length; i++) {
  if(/^s\d+/.test(spans[i].id)) {
        snowElms.push(spans[i]);
        }
    }
for(var i=0; i<snowElms.length; i++) {
    document.body.removeChild(snowElms[i]);
    }
}

for (var i=0;i<=snowmax;i++) {
document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"<\/span>");
}
if (browserok) {
window.onload=initsnow;
}

Bước 2: Upload tập tin js lên public_html/js/xenforo hoặc trong bất kỳ thư mục nào
Bước 3: Đến template page_container_js_body và thêm hàm dưới đây

<xen:require js="js/xenforo/snow.js" />

Thay đổi đường dẫn thư mục trong hàm trên nếu bạn upload tập tin js lên một nơi khác.

Chúc các bạn thành công.

Nguồn: xenforo.rocks​

 

[dinhhai]

Để dành năm sau xài

Giờ làm hiệu ứng mưa xuân đi bác @PVS

 

[PVS]

Để dành năm sau xài

Giờ làm hiệu ứng mưa xuân đi bác @PVS

Cái này được không bạn http://vnxf.vn/them-hieu-ung-hoa-mai-hoa-dao-roi-vao-xenforo.t11876.html

 

[dinhhai]

Để dành năm sau xài

Giờ làm hiệu ứng mưa xuân đi bác @PVS

Cái này được không bạn http://vnxf.vn/them-hieu-ung-hoa-mai-hoa-dao-roi-vao-xenforo.t11876.html

Cảm ơn bác,
Hiện tại mình đang xài hiệu ứng di chuyển chuột nó ra hoa mai hoa đào giống cái bác share (của bác là rơi)
Theo mình thì tuyết rơi => đẹp
Hoa mai hoa đào rơi => chưa phù hợp lắm
Mưa xuân => lại phù hợp Vậy nên bác nghiên cứu thử xem sao nha bác @PVS