Скрипт снегопада с картинками

Скрипты

Рисунок Скрипт снегопада с картинками
x;z-index:1 }
Скрипт снегопада с картинками Скрипт снегопада с картинками
оценка: 4.7 из 5
оценок: 28, отзывов: 13

Новый Год не за горами и сайтостроители начали украшать свои сайты и придавать им праздничный вид. Самый распространенный вид украшательства - это снегопад. Такие снегопады создаются при помощи JavaScript кода.

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

Итак, никаких дополнительных фреймворков не требуется. Скрипт работает на чистом JavaScript. Для размещения снегопада на сайте нужно вписать следующий код перед закрывающим тегом BODY.

Code
<script type="text/javascript">
  // Количество снежинок (не ставьте слишком много - может затормозить браузер)
  var snowmax = 50;

  // Разность скорости слоев (рекомендуется от 0.3 до 2)
  var sinkspeed = 0.6;

  // Максимальный размер снежинок (пиксели)
  var snowmaxsize = 30;

  // Минимальный размер снежинок (пиксели)
  var snowminsize = 10;

  // Скорость падения снега (мс)
  var snowspeed = 20;

  // Зона снегопада
  // 1 - снегопад на всем пространстве
  // 2 - снегопад в левой части
  // 3 - снегопад по центру
  // 4 - снегопад в правой части
  var snowingzone = 1;

  var i = 0;
  grphcs = new Array();

  // Список ссылок к картинкам снежинок
  grphcs[i++] = "http://szenprogs.ru/images/snow/snow1.gif";
  grphcs[i++] = "http://szenprogs.ru/images/snow/snow2.gif";
  grphcs[i++] = "http://szenprogs.ru/images/snow/snow3.gif";
  grphcs[i++] = "http://szenprogs.ru/images/snow/snow4.gif";
  grphcs[i++] = "http://szenprogs.ru/images/snow/snow5.gif";
  grphcs[i++] = "http://szenprogs.ru/images/snow/snow6.gif";

  // Не редактировать ничего ниже этой линии
  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 randoms(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };

  function preloadimages(img){
    image = new Image();
    for(var i = 0; i < img.length; i++) image.src = img[i];
  }

  function initsnow() {
    if (ie5 || opera) {
      marginbottom = document.body.scrollHeight;
      marginright = document.body.clientWidth - 15;
    }
    else if (ns6) {
      marginbottom = document.body.scrollHeight;
      marginright = window.innerWidth - 15;
    }
    var snowsizerange = snowmaxsize - snowminsize;
    for (var 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].size = randommaker(snowsizerange) + snowminsize;
      snow[i].style.width = snow[i].size + 'px';
      snow[i].style.height = snow[i].size + 'px';
      snow[i].style.zIndex = 1000;
      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 (var 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()", snowspeed)
  }

  preloadimages(grphcs);

  for(var i = 0; i <= snowmax; i++){
    imgsrc = grphcs[randoms(0,grphcs.length-1)];
    document.write("<img src='" + imgsrc + "' id='s" + i + "' style='position:absolute;top:-" + snowmaxsize + "'>");
  }
  if(browserok){
    window.onload = initsnow;
  }

</script>

Какие параметры за что отвечают - записано в скрипте. Думаю, разберетесь. Если же вам подойдут настройки по-умолчанию, то можете использовать сокращенный вид кода скрипта снегопада. Записывать его нужно перед закрывающим тегом BODY:

Code
<script type="text/javascript" src="http://szenprogs.ru/scripts/snowfall1/snowfall.sp.js"></script>

Скрипт снегопада и картинки снежинок можете переместить на свой хост. При этом нужно будет поменять и адреса на свои.

На этом все. Удачи в свершениях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

x;z-index:1 }


Скрипт снегопада с картинками
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:10431
Рейтинг:4.7/28
Дата добавления:2011-12-23 16:21, Пятница
Добавил:Szen
Теги:украшение, новый год, Снегопад

Мини-форум

1-10 11-13
№ 02011-12-23 16:21
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Скрипт снегопада с картинками".
Гость
№ 1
2011-12-23 19:49
klocha
Аватар участника klocha
Спасибо большое - вот теперь вообще круто!!!
Сергей
№ 2
2012-09-04 18:03
Daria_web
Аватар участника Daria_web
Szen, Подскажите, очень прошу. Как задать точную траекторию движения снежинок по прямой и при том по бокам страницы сайта. Словно бегущая строка, аккурат справа и слева. Спасибо!
Daria
№ 3
2012-09-05 20:33
Szen
Аватар участника Szen
Daria_web, скрипт шариков сейчас в работе. Подождите немного. Ссылку здесь же оставлю. ))
Szen
№ 4
2012-09-20 14:14
Szen
Аватар участника Szen
Daria_web, наконец я смог закончить скрипт с шариками. Статью вы можете посмотреть по следующей ссылке "воздушные шарики".
Szen
№ 5
2012-11-22 22:01
Домовой
Аватар участника Домовой
По ссылке на скрипт с шарами перекидывает на http://topsape.ru/api/
Это шутка такая?
Юрий
№ 6
2012-11-22 22:54
Szen
Аватар участника Szen
Домовой, не, это глюк или даж взлом. Я этого не планировал. Ща разберусь.
Szen
№ 7
2012-11-22 22:58
Szen
Аватар участника Szen
Домовой, короче, информер по стате в Сапе внезапно дал сбой. Все страницы, где он был, редиректили. ((

На данный момент все исправлено, сайт работает в нормальном режиме. Домовой, спасибо за сообщение. Сам бы не сразу заметил.
Szen · WWW
№ 8
2012-11-22 23:36
Домовой
Аватар участника Домовой
да пожалуйста))))))))))
Юрий
№ 9
2012-12-20 18:53
Lii21
Аватар участника Lii21
Подскажите пожалуйста. Снежинки теперь у меня сбились в углу и не летают. что с ними делать???
Элиза
№ 10
2012-12-20 18:54
Lii21
Аватар участника Lii21
http://www.advance.kharkov.ua/index.html
Элиза
1-10 11-13
Учавствовать в обсуждении "Скрипт снегопада с картинками" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Посетители
Зарегистрированных посетителей не было.
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Какой JavaScript фреймворк вы изпользуете?
Всего ответов: 180
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 1
Гостей: 1
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2024 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz