Домой Веб дизайн и фотошоп Эффект падающего снега на сайте (javascript)

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

Автор

Дата

Категория

В связи с приближающимся Новым Годом думаю многие вебмастера захотят украсить свой сайт падающим на нем снегом. Мы это будем делать простеньким 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: Исправлен немного скрипт, добавил кроссбраузерность, теперь должно работать везде.

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

Новое

Яндекс: мой нелюбимый поисковик

В настоящее время лидером поискового Рунета остается Яндекс. Каждый день его посещают порядка 15 миллионов человек. Яндекс имеет доступ к более 10...

Как монетизировать SEO трафик?

Давайте возьмем за пример этот блог. Как видите тематика SEO, сайтостроение, монетизация блогов и сайтов, продвижение в поисковых системах и вытекающие...

Не большой отчет по заработку на gogetlinks

Сегодня я бы хотел коснуться темы заработка на бирже вечных ссылок gogetlinks, а также предоставить не большой отчет по работе с...

Как продавать ссылки минимум за 200 рублей!

Решил описать способ, которым пользуюсь сам, когда деньги нужны не так срочно, можно инвестировать свое время и получить с продажи одной...

Обналичиваем чек Adsense в Украине через Приват 24

Как же получить деньги по чеку Adsense в Украине быстрее всего ? Да очень просто, если это делать через систему Приват 24. Обналичивание чека...

Популярное

Как продавать ссылки минимум за 200 рублей!

Решил описать способ, которым пользуюсь сам, когда деньги нужны не так срочно, можно инвестировать свое время и получить с продажи одной...

Яндекс: мой нелюбимый поисковик

В настоящее время лидером поискового Рунета остается Яндекс. Каждый день его посещают порядка 15 миллионов человек. Яндекс имеет доступ к более 10...

Как монетизировать SEO трафик?

Давайте возьмем за пример этот блог. Как видите тематика SEO, сайтостроение, монетизация блогов и сайтов, продвижение в поисковых системах и вытекающие...

Не большой отчет по заработку на gogetlinks

Сегодня я бы хотел коснуться темы заработка на бирже вечных ссылок gogetlinks, а также предоставить не большой отчет по работе с...

Обналичиваем чек Adsense в Украине через Приват 24

Как же получить деньги по чеку Adsense в Украине быстрее всего ? Да очень просто, если это делать через систему Приват 24. Обналичивание чека...
×