В связи с приближающимся Новым Годом думаю многие вебмастера захотят украсить свой сайт падающим на нем снегом. Мы это будем делать простеньким javascript который не будет сильно нагружать сайт, но в тоже время сделает очень красивый эффект.

Эффект падающего снега на сайте

 

Код падающего снега работает на основе символа *.

Чтобы на сайте появился падающий снег нужно просто скопировать ниже предоставленный код к вам в сайт:

<script type=»text/javascript»>// <![CDATA[

// Количество снежинок на странице (Ставьте в границах 30-40, больше не рекомендую)

var snowmax=35;

// Установите цвет снега, добавьте столько цветов сколько пожелаете

var snowcolor=new Array(«#AAAACC»,»#DDDDFF»,»#CCCCDD»,»#F3F3F3″,

«#F0FFFF»,»#FFFFFF»,»#EFF5FF»)

// Поставьте шрифты из которых будет создана снежинка ставьте столько шрифтом сколько хотите

var snowtype=new Array(«Arial Black»,»Arial Narrow»,»Times»,»Comic Sans MS»);

// Символ из какого будут сделаны снежинки (по умолчанию * )

var snowletter=»*»;

// Скорость падения снега (рекомендую в границах от 0.3 до 2)

var sinkspeed=0.6;

// Максимальный размер снежинки

var snowmaxsize=22;

// Установите минимальный размер снежинки

var snowminsize=8;

// Устанавливаем положение снега

// Впишите 1 чтобы снег был по всему сайту, 2 только слева

// 3 только по центру, 4 снег справа

var snowingzone=1;

/*

// * ПОСЛЕ ЭТОЙ ФРАЗЫ БОЛЬШЕ НЕТ КОНФИГУРАЦИИ*

*/

// НИЧЕГО НЕ ИЗМЕНЯТЬ

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() {

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 (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+»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() {

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=0;

}

}

var timer=setTimeout(«movesnow()»,50);

}

for (i=0;i<=snowmax;i++) {

document.write(«<span id=’s»+i+»‘ style=’position:absolute;top:-«+snowmaxsize+»px;’>»+snowletter+»</span>»);

}

if (browserok) {

window.onload=initsnow;

}

// ]]></script>

Поздравляю всех с приближающимися праздниками!

UPD 12/12/2011: Исправлен немного скрипт, добавил кроссбраузерность, теперь должно работать везде.

,
Похожие записи