Эффект падающего снега на сайте (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: Исправлен немного скрипт, добавил кроссбраузерность, теперь должно работать везде.

Понравилась статья? Поделиться с друзьями:
Комментарии: 24
  1. Lana

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

  2. Vlad StrikeR

    супер!

  3. АРТЕМ

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

    1. syblog

      Пожалуйста :-)

  4. Sergio_Kalash

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

  5. Евгений

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

  6. gor

    spasiboo

  7. Almas

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

  8. Валентин

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

  9. Ксения

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

  10. Василь

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

  11. Светлана

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

  12. Niko

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

  13. Smile

    Зачетно!!

  14. dasha

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

  15. Comedi

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

  16. banaicio

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

    1. Кэп

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

    2. 555

      никак….

  17. Sytrus (автор)

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

  18. Lena

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

    1. Daddy

      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. R1fle

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

          написать:

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: