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

Читайте также:

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

Комментарии:

24 Comments

  1. 67 строка: snowtype/length
    Опечатка, видимо, тут точка должна быть.
    Иначе шрифты не перебирает.

  2. СКРИПТ СУПЕР))) РАБОТАЕТ НА ДЖУМЛА КАК ЧАСЫ

    1. Пожалуйста 🙂

  3. Спасибо, все работает.

  4. Спасибо большое! Все работает!

  5. Спасибо! Все работает! Сделано отлично!

  6. А-а-а-а-а-атлична!!! Работает превосходно. Спасибо!

  7. Вот ещё вариант можно размер и скорость падения снежинок менять: justclickit.ru/wintersnow.php

  8. У Вас часом немає скрипту дощу, бо дуже треба(: Якщо є то буду дуже вдячний, а як ні то підкажіть як замість символу в даному скрипті поставити картинку(:

  9. У меня на Opere движок Word Press маленькие звездочки мигают вверху сайта, а снежинка одна недвижимая в верхнем левом углу стоит. Что делать?

  10. Простите, но даже исправленный daddy скрипт не работает в таких браузерах как chrome safari mozilla, только в explorer. не могли бы вы прописать полный код?

  11. а почему код может не работать?

  12. Спасибо, отличный скрипт!

  13. а как сделать. чтобы снег летел до конца страницы?

    1. да. меня тоже это интересует.
      как сделать. чтобы снег летел до конца страницы?

  14. Обновили скрипт, daddy спасибо за помощь

  15. На google chrome данный скрипт не работает. Подскажите, пожалуйста, как исправить?

    1. 87-я и 88-я строки должны выглядеть так: snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+’px’;
      snow[i].style.top=snow[i].posy+’px’
      обратите внимание на +’px’ в конце.
      После такой доработки должен работать почти в любом браузере.

      1. а как сделать. чтобы снег летел до конца страницы?

        1. Изменить строки, вместо:
          else if (ns6) {
          marginbottom=window.innerHeight;
          marginright=window.innerWidth;
          }

          написать:

          else if (ns6) {
          marginbottom=document.body.clientHeight;
          marginright=document.body.clientWidth;
          }

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.