Пятница , 20 Октябрь 2017
Главная / Веб дизайн и фотошоп / Эффект падающего снега на сайте (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: Исправлен немного скрипт, добавил кроссбраузерность, теперь должно работать везде.

24 комментария

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

  2. Vlad StrikeR

    супер!

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

  4. Sergio_Kalash

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

  5. Евгений

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

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

  7. Валентин

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

  8. Ксения

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

  9. Василь

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

  10. Светлана

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

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

  12. Зачетно!!

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

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

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

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

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

    • 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’ в конце.
      После такой доработки должен работать почти в любом браузере.

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

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

          написать:

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

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

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

14 − девять =