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

Скрипты

Рисунок Падающий снег на сайте
Падающий снег на сайте Падающий снег на сайте
оценка: 4.4 из 5
оценок: 89, отзывов: 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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




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

rss
Категория:Скрипты
Просмотрено:43728
Рейтинг:4.4/89
Дата добавления: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
Учавствовать в обсуждении "Падающий снег на сайте" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Во сколько оцените портал
Всего ответов: 1888
Статистика
Valid HTML 4.01 Transitional

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



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