Падающий снег на сайте. Скрипты. Блог. Портал SzenProgs
 

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

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

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

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

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


Вы можете выразить свою благодарность администрации портала отправив SMS-кой выбранное вами количество денежек:


Категория:Скрипты
Просмотрено:8310
Рейтинг:4.5/17
Дата добавления:06.05.2009 09:16, Среда
Добавил:Szen
Теги:Снег, падающий снег, JavaScript
Опечатка

Рекомендуем

Дополнительно

Внимание

Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.

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

Мини-форум

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

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

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

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

У вас на сайте слишком много флеш-баннеров. Они и съедают часть ресурсов. Разные браузеры раздают разное количество ресурсов под флеш-анимацию. Поэтому и скорость разная.
ПрофильWWW
1 2 »
Учавствовать в обсуждении "Падающий снег на сайте" могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Местоположение
Реклама
Интересное
Загрузка...
День рождения
Поздравляем с днем рождения следующих друзей:
gregori(24), PateTrure(32), MartaUA(30), sibnetwork(32).
Желаем им счастья, здоровья, благополучия, любви и богатства!

С уважением, администрация сайта.
Holiday
Посетители
Sergik30
iwanovabh
Whanibeliamma
Rearnebax
coermaodona
Статистика
Valid HTML 4.01 Transitional
Все счетчики
Онлайн всего: 16
Гостей: 16
Пользователей: 0
Кнопка портала
Портал SzenProgs - все для мастеров
получить код
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Софт
Заработок
Интересное
Загрузка...
Опрос
Сколько сайтов у вас есть?
[ Результаты · Архив опросов ]
Всего ответов: 486
Друзья портала
Информационно-развлекательный протал BIGBEN HOME STUDIO форум, статьи, обьявления, файловый архив,фотогалерея и много всего другого!

Many-FileS.RU - Скачать бесплатно музыку, фильмы, софт, книги без регистрации!

Работа в интернете
© 2009, SzenProgs
Администратор и дизайнер портала: Szen
Хостинг от uCoz