Падающий снег на сайте

Скрипты

Рисунок Падающий снег на сайте
x;z-index:1 }
Падающий снег на сайте Падающий снег на сайте
оценка: 4.3 из 5
оценок: 93, отзывов: 24

Может и поздно, но давайте попробуем сделать на сайте эффект падающего снега. При желании, можно назначить определенный промежуток времени, когда он будет падать а когда - нет.

Так, приступим к работе. Для начала вставим на сайт скрипт. Его желательно вставить в самом конце страницы перед </body>. Такая установка предотвратит притормаживание при падении снега, так как страница уже будет подгружена.

Code
<script language="javascript" type="text/javascript">
<!--
Amount = 100;

Image0 = new Image();
Image0.src = "http://szenprogs.ru/images/snow/snow1.gif";

grphcs = new Array(1);
grphcs[0] = "http://szenprogs.ru/images/snow/snow1.gif";

Ypos = new Array();
Xpos = new Array();
Speed = new Array();
Step = new Array();
Cstep = new Array();
var YPosA;
ns = (document.layers)?1:0;
if (ns) {
  for (i = 0; i < Amount; i++) {
    var P = Math.floor(Math.random()*grphcs.length);
    rndPic = grphcs[P];
    document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><a http://szenprogs.ru/blog/2009-05-06-41><img src="+rndPic+"><\/a><\/LAYER>");
  }
} else {
  document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
  for (i = 0; i < Amount; i++) {
    var P = Math.floor(Math.random()*grphcs.length);
    rndPic = grphcs[P];
    document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute; top:0px; left:0px; width:20px; height:20px;">');
  }
  document.write('<\/div><\/div>');
}
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i=0; i < Amount; i++) {
  Ypos[i] = Math.round(Math.random()*WinHeight);
  Xpos[i] = Math.round(Math.random()*WinWidth);
  Speed[i]= Math.random()*3+2;
  Cstep[i] = 0;
  Step[i] = Math.random()*0.1+0.05;
}
function fall() {
  var WinHeight = (document.layers)?window.innerHeight:window.document.body.clientHeight;
  var WinWidth = (document.layers)?window.innerWidth:window.document.body.clientWidth;
  var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
  var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
  for (i=0; i < Amount; i++) {
    sy = Speed[i]*Math.sin(90*Math.PI/180);
    sx = Speed[i]*Math.cos(Cstep[i]);
    Ypos[i] += sy;
    Xpos[i] += sx;
    if (Ypos[i] > WinHeight) {
      Ypos[i] = -60;
      Xpos[i] = Math.round(Math.random()*WinWidth);
      Speed[i] = Math.random()*5+2;
    }
    if (ns) {
      document.layers['sn'+i].left = Xpos[i];
      document.layers['sn'+i].top = Ypos[i]+hscrll;
    } else {
      document.getElementById('si'+i).style.left = Xpos[i]+'px';
      YPosA=Ypos[i]+hscrll;
      document.getElementById('si'+i).style.top = YPosA+'px';
    }
    Cstep[i] += Step[i];
  }
  setTimeout('fall()',10);
}
fall();
//-->
</script>

При вставке скрипта в начало страницы, снег начнет падать сразу с момента входа на страницу. Если скрипт в конце страницы, то и снег пойдет только после загрузки страницы полностью.

Расшифруем некоторые параметры скрипта:

  • Amount = 100; - это количество видимых на странице снежинок.
  • Image0.src = "http://szenprogs.ru/images/snow/snow1.gif"; и grphcs[0] = "http://szenprogs.ru/images/snow/snow1.gif" - путь к изображениям снежинок.
  • width:20px; height:20px; - высота и ширина снежинок.

При желании можно выводить не один, а несколько типов снежинок. Для этого в скрипте нужно будет заменить текст:

Code
Image0 = new Image();
Image0.src = "http://szenprogs.ru/images/snow/snow1.gif";

grphcs = new Array(1);
grphcs[0] = "http://szenprogs.ru/images/snow/snow1.gif";

вот этим:

Code
Image0 = new Image();
Image0.src = "http://szenprogs.ru/images/snow/snow1.gif";
Image1 = new Image();
Image1.src = "http://szenprogs.ru/images/snow/snow2.gif";
Image2 = new Image();
Image2.src = "http://szenprogs.ru/images/snow/snow3.gif";
Image3 = new Image();
Image3.src = "http://szenprogs.ru/images/snow/snow4.gif";
Image4 = new Image();
Image4.src = "http://szenprogs.ru/images/snow/snow5.gif";
Image5 = new Image();
Image5.src = "http://szenprogs.ru/images/snow/snow6.gif";

grphcs = new Array(1);
grphcs[0] = "http://szenprogs.ru/images/snow/snow1.gif";
grphcs[1] = "http://szenprogs.ru/images/snow/snow2.gif";
grphcs[2] = "http://szenprogs.ru/images/snow/snow3.gif";
grphcs[3] = "http://szenprogs.ru/images/snow/snow4.gif";
grphcs[4] = "http://szenprogs.ru/images/snow/snow5.gif";
grphcs[5] = "http://szenprogs.ru/images/snow/snow6.gif";

Можно обращаться к снежинкам нашего портала. Всего доступно 6 типов снежинок (для получения адреса снежинки щелкните по ней мышкой):
Снежинка 1 Снежинка 2 Снежинка 3 Снежинка 4 Снежинка 5 Снежинка 6

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

Code
<?if($MONTH$=12 || $MONTH$=1 || $MONTH$=2)?>
тут код скрипта
<?endif?>

Этот пример будет показывать падающий снег только в декабре, январе и феврале.

Приятого Вам использования.

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

x;z-index:1 }


Падающий снег на сайте
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:50201
Рейтинг:4.3/93
Дата добавления:2009-05-06 09:16, Среда
Добавил:Szen
Теги:JavaScript, падающий снег, Снег, снегопад
Опечатка

Рекомендуем

Дополнительно к Падающий снег на сайте

Мини-форум

1-10 11-20 21-24
№ 02009-05-06 09:16
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Падающий снег на сайте".
Гость
№ 1
2009-12-01 13:35
Winston1982
Аватар участника Winston1982
Вопросик такой...снежинки все собрались в кучку в верхнем левом углу и не хотят летать))) Не подскажите, что поправить в скрипте?
Алексей
№ 2
2009-12-01 13:47
Winston1982
Аватар участника Winston1982
Ну вот я и оставил, кстати спасибо за скриптик...только снежинки не хотят летать)))
Алексей
№ 3
2009-12-01 14:04
Szen
Аватар участника Szen
Winston1982, какой у вас браузер?
И ссылку на страницу, куда установили, пожалуйста.
Szen · WWW
№ 4
2009-12-01 14:04
Winston1982
Аватар участника Winston1982
Короче, трабла в браузере...в опере летает, а в других браузерах нет...Как исправить? Этож не дело...многие пользователи моего сайта используют мозилу.
Алексей
№ 5
2009-12-01 15:45
Szen
Аватар участника Szen
Winston1982, я немного подправил скрипт. Теперь все должно работать. Проверял в Opera 9.64, FireFox 3.5.5 и Internet Explorer 6.
Szen · WWW
№ 6
2009-12-01 16:27
Winston1982
Аватар участника Winston1982
Спасибо, работает. Сайт в локалке, так что ссылка ничего не даст)))
Алексей
№ 7
2009-12-15 21:03
gaywer
Аватар участника gaywer
а проблемка такая.... я в 2 браузерах посмотрел везде одинаково (Opera, Mozilla)
снег падает и размер страницы почемуто прыгает:( и ео ширине и по высоте!!!
Роман
№ 8
2009-12-15 21:13
Szen
Аватар участника Szen
gaywer, это нормально. Если хотите, чтобы страница не прыгала добавьте в тело HEAD:
<style type="text/css">
body{overflow:hidden;}
</style>
Страница прыгать перестанет, но при этом потеряется полоса прокрутки, если страница не будет вмещаться по горизонтали.
Szen · WWW
№ 9
2009-12-17 10:08
baniman
Аватар участника baniman
Дружище Szen! а как уменьшить скорость снежинок? и как сделать чтобы к примеру они падали на пол сайта? и ещё странная скорость в разных браузерах посмотрите пожалуйста данный скрипт на сайте http://www.proriv.su/ вот в разных браузерах разная скорость... =( Заранее Благодарю!
baniman · WWW
№ 10
2009-12-17 11:24
Szen
Аватар участника Szen
Quote (baniman)
как уменьшить скорость снежинок?

Замените цифру 10 в этом месте на свою:
Code
setTimeout('fall()',10);

Это задержка перед перемещением снежинок в миллисекундах.

Quote (baniman)
в разных браузерах разная скорость

У вас на сайте слишком много флеш-баннеров. Они и съедают часть ресурсов. Разные браузеры раздают разное количество ресурсов под флеш-анимацию. Поэтому и скорость разная.
Szen · WWW
1-10 11-20 21-24
Учавствовать в обсуждении "Падающий снег на сайте" могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Нас находят по этим запросам: Падающий снег на сайте, Падающий снег на сайте Скрипты, Падающий снег на сайте Блог, Падающий снег на сайте читать, Падающий снег на сайте Блог читать, Падающий снег на сайте Скрипты читать, Падающий снег на сайте онлайн, Падающий снег на сайте Скрипты online
Местоположение
Реклама
Кнопка портала
Портал SzenProgs - все для мастеров
получить код
Посетители
Зарегистрированных посетителей не было.
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

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


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