Новости Скрипты Онлайн сервисы Хитрости Гостевая книга Статистика сайта Реклама на сайте
UsefulScript.ruСкриптыГрафикаСкрипт падающих снежинок
104
254

Скрипт падающих снежинок

Зимой на некоторых сайтах Вы наверняка наблюдали подающие сверху снежинки. Если с данным скриптом не переусердствовать, то выглядит это вполне красиво.


Как Вы уже могли заметить, на данной страничке установлен данный скрипт падающего снега.


Это довольно простой скрипт падающих снежинок и имеет мало настроек. Если Вас интересует более продвинутый вариант скрипта падающих снежинок, то посетите тему Скрипт снегопада.


Для того, чтобы сделать на своем сайте идущий снег, достаточно скопировать к себе на сайт следующий код:

JavaScript код:
<script type="text/javascript">
var 
imgsrc="image/snow/snow.gif";
var 
ie4=(document.all)?1:0;
var 
ns6=(document.getElementById&&!document.all)?1:0;
var 
height=(document.layers)?window.innerHeight:window.document.body.scrollHeight;
if (
height<window.document.body.clientHeightheight=window.document.body.clientHeight;
var 
width=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var 
col=Math.round(height/25);    //количество снежинок

amp=new Array();
x_pos=new Array();
y_pos=new Array();
stx=new Array();
sty=new Array();
deltax=new Array();
obj=new Array();

for (
i=0i<col; ++i) {
 
amp[i]=Math.random()*19;
 
x_pos[i]=Math.random()*(width-amp[i]-29);
 
y_pos[i]=Math.random()*height;
 
stx[i]=0.03+Math.random()*0.25;
 
sty[i]=2+Math.random();
 
deltax[i]=0;
 if (
ie4||ns6) {
    
document.write("<img id=\"sn"+"\" style=\"position:absolute;" +
    
"z-index: "+"; visibility:visible; top:-50px; left:-50px;\"" +
    
"src='"+imgsrc+"' border=0>");
 }
 
obj[i] = document.getElementById("sn"+i);
}

function 
flake() {
 for (
i=0i<col; ++i) {
    
y_pos[i]+=sty[i];
    if (
y_pos[i]>height-49) {
        
x_pos[i]=Math.random()*(width-amp[i]-29);
        
y_pos[i]=0;
    }
    
deltax[i]+=stx[i];
    
obj[i].style.top=y_pos[i]+"px";
    
obj[i].style.left=x_pos[i]+amp[i]*Math.sin(deltax[i])+"px";
 }
setTimeout("flake()"40);
}
flake();
</script>

Не забудьте в строчке imgsrc="image/snow/snow.gif"; указать путь к картинке снежинки.


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


Скачать GIF-изображения снежинок можно с нашего сайта по ссылке - Снежинки.


Дата создания: 18:54:04 04.10.2012 г.
Дата обновления: 20:05:02 18.12.2013 г.
Посещений темы: 23758 раз(а).

Комментарии посетителей (всего 37 шт.):
Анатолий
-1
# 501
(17:29:28  27.12.2012 г.)

У меня не работает, редактор пишет ошибка в строке
document.write("<img id=\"sn"+ i +"\" style=\"position:absolute;
Ответить

Administrator
1
# 502
(19:54:55  27.12.2012 г.)

Анатолий, т.к. весь код не влез в одну строчку, то он был разбит на три строки. Для того чтобы избавиться от ошибки, необходимо данные три строчки объединить в одну!
Ответить

влад
-1
# 505
(16:33:26  29.12.2012 г.)

Загрузил на сервер снежинку, установил скрипт, но нет снежинок. Прописал в скрипте так---var imgsrc="мой сайт.ru/название темы/images/snow.gif";
Что неправильно сделал? Спасибо.
Ответить

Administrator
1
# 510
(23:51:55  29.12.2012 г.)

Проверьте, действительно ли по указанному Вами пути имеется изображение. Попробуйте удалить из переменной imgsrc адрес сайта.
Ответить

Юрий
1
# 508
(23:41:56  29.12.2012 г.)

На mybb этот скрипт будет работать?
Ответить

Administrator
1
# 511
(23:54:49  29.12.2012 г.)

Должен, т.к. для работы скрипта используется JavaScript без каких-либо дополнительных библиотек.
Ответить

Трофим
0
# 523
(03:23:26  05.01.2013 г.)

Намучился. Скрипт ни в какую не хотел работать. Причина была даже не в пути к файлу, где лежит картинка. Причина именно в объединении строк. Это настолько важно, что я бы записал это в текст статьи. Именно это нужно проверять в первую очередь, поскольку не имея специализированного редактора отловить этот нюанс довольно сложно. А при неправильном пути вместо снежинок падают иконки.
Ответить

САША
1
# 618
(00:09:38  17.02.2013 г.)

Не могу прописать правильный путь, подскажите, пожалуйста, вроде ввожу: F:\home\localhost\www\s там у меня снежинка, а он мне не показывает их..., а если ввожу \home\localhost\www\s, то место снежинок падают неопределенные картинки.
Ответить

Administrator
0
# 621
(13:21:40  17.02.2013 г.)

САША, путь к изображению надо прописывать относительного файла, в котором она загружается. Если изображение и исполняемый файл в одной папке, то достаточно указать только имя файла.
Ответить

Елена
0
# 1323
(03:05:12  11.12.2013 г.)

А можно для "чайника" объяснить? У меня блог в ЖЖ. Как там сделать, чтобы в конкретном посте поверх текста падали снежинки? Или в ЖЖ это нереально?
Ответить

Administrator
-1
# 1325
(19:39:11  11.12.2013 г.)

Вы можете редактировать HTML код страницы? Если да, то просто вставьте в страничку скрипт из данной темы.
Ответить

Наталия
0
# 1344
(23:40:28  17.12.2013 г.)

Добрый день. Установила. Большое спасибо, всё прекрасно работает, но с одним "но"... При прокрутке страницы снежинки заканчиваются. Можно ли продлить действие, так сказать "вниз"?
Ответить

Administrator
0
# 1345
(00:13:06  18.12.2013 г.)

Измените var height=(document.layers)?window.innerHeight:window.document.body.clientHeight;
на var height=(document.layers)?window.scrollHeight:window.document.body.scrollHeight;
Ответить

Наталия
1
# 1350
(13:13:03  18.12.2013 г.)

Сработало. Правда плотность снежинок просто растянулась на всю длину страницы. Снег теперь реденький.
Ответить

Administrator
0
# 1352
(19:56:45  18.12.2013 г.)

Так увеличьте количество снежинок в переменной col. А еще можно сделать автоматическое изменение количества снежинок, в зависимости от высоты странички. Для этого после того, как вычислили высоту странички в переменной height, добавьте следующую строчку: var col=Math.round(height/20);
P.S. Скрипт в теме тоже изменил.
Ответить

Алексей
0
# 1422
(21:09:01  21.01.2014 г.)

Код изменил, но все равно при прокрутке страницы снежинки заканчиваются... Что такое может быть?
Ответить

Administrator
0
# 1423
(21:25:16  21.01.2014 г.)

Вероятно, у Вас на страничке есть динамические объекты, при загрузке странички размер которых не известен. Таким образом, скрипт определяет размер экрана, а после этого, через некоторое время высота странички увеличивается за счет подгрузки этих самых объектов. Отсюда и разница.
Для того, чтобы это исправить, добавьте после function flake() { строчки:
height=(document.layers)?window.innerHeight:window.document.body.scrollHeight;
if (height<window.document.body.clientHeight) height=window.document.body.clientHeight;
Ответить

Сергей
0
# 1357
(21:40:16  21.12.2013 г.)

Подскажите, как управлять скоростью падения снежинок.
Ответить

Administrator
0
# 1359
(23:18:04  21.12.2013 г.)

Имеется два варианта:
1) Изменить время в setTimeout("flake()", 40);
2) Изменить смещение снежинок по оси Y в строке sty[i]=2+Math.random();
Ответить

Виталий
0
# 1368
(01:52:05  24.12.2013 г.)

Подскажите, как уменьшить размер снежинок?
Ответить

Administrator
-1
# 1371
(19:59:14  24.12.2013 г.)

Просто измените размер изображения любым графическим редактором.
Ответить

Заир
0
# 1969
(18:39:09  15.10.2014 г.)

Помогите люди "чайнику" у меня не работает скрипт. Скачал на Windows Xp "Denwer" и начал вставлять код, но у меня не падают снежки.
Ответить

Administrator
0
# 1972
(22:02:01  15.10.2014 г.)

Предлагаю Вам воспользоваться более продвинутым скриптом падающих снежинок jQuery.
Ответить

Светлана
0
# 2052
(00:57:42  24.11.2014 г.)

Как вынести этот код во внешний файл? Что, в общих чертах, нужно будет изменить?
Ответить

Administrator
0
# 2053
(19:55:43  24.11.2014 г.)

Скопируйте весь JavaScript код за исключением тэгов <script type="text/javascript"></script> в новый файл, например snow.js. Не забудьте строчку с переносами сделать в одну строку. Далее на тех страничках, где необходимо добавить снег, вставьте код <script type="text/javascript" src="snow.js"></script>
Ответить

Светлана
0
# 2054
(20:24:40  24.11.2014 г.)

Спасибо, и правда не догадалась! А можно ли как-то придать снежинкам вращение? Насколько это сложно?
Ответить

Administrator
0
# 2055
(20:46:40  24.11.2014 г.)

Наверно, проще будет сделать анимированные gif снежинки, чем вращать их на JavaScript.
Ответить

Светлана
0
# 2057
(01:50:21  25.11.2014 г.)

Кстати, в FireFox снежинки ОЧЕНЬ тормозят :(
Ответить

Mitsumaru
0
# 2058
(09:05:52  25.11.2014 г.)

Здравствуйте. Очень понравился скрипт но есть одна проблема. Если изменить масштаб страницы (ctrl+колесиком мышки прокрутить) на 50%. (Просто у многих пользователей широкие по разрешению мониторы). То снежинки падают только в левой половине страницы! Как сделать, чтобы они были только посередине, или на всю ширину как-нибудь растягивались для пользователей широких мониторов?
Ответить

Administrator
0
# 2061
(19:59:23  25.11.2014 г.)

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

Ольга
1
# 2069
(18:52:51  27.11.2014 г.)

Здравствуйте.
Вы можете мне подсказать, что нужно изменить в коде, чтобы снежинки падали только по бокам сайта?
Ответить

Administrator
1
# 2072
(00:27:50  29.11.2014 г.)

В скрипте, в двух местах замените x_pos[i]=Math.random()*(width-amp[i]-29); на:
if (i%2==0) x_pos[i]=Math.random()*(width*0.15);
else x_pos[i]=width-amp[i]-29-Math.random()*(width*0.15);
Ответить

Олька
0
# 2099
(01:52:39  08.12.2014 г.)

Здравствуйте! У меня возник один вопрос. Вот я хочу? чтобы на моем сайте падали нолики и единички. Скачала соответствующие картинки, а как в коде прописать, чтобы и 0 и 1 падали? Буду очень благодарна.
Ответить

Administrator
0
# 2102
(20:27:39  08.12.2014 г.)

Удалите строчку var imgsrc="image/snow/snow.gif";
А перед строчкой amp[i]=Math.random()*19; добавьте следующие две:
if (i%2==0) imgsrc="image/snow/the_flake0.gif";
else imgsrc="image/snow/the_flake1.gif";
Ответить

Алексей
0
# 2857
(13:53:30  02.12.2015 г.)

Добрый день! Спасибо за скрипт! А если я хочу несколько изображений снежинок? Можно ли обойтись без переменных и прописать их чередованием? Или как лучше написать? Спасибо!
Ответить

Administrator
0
# 2859
(22:28:18  02.12.2015 г.)

Советую Вам обратить внимание на более новый скрипт падающих снежинок на jQuery.
Ответить

Сергей
0
# 3590
(22:31:34  24.11.2016 г.)

Спасибо скрипт хороший. Один вопросик. Вставляю скрипт в материал joomla. Все срабатывает только снежинки по всему сайту. Хотелось бы что бы только в материале. Что пофиксить подскажите пожалуйста?
Ответить

Закрыть
Ваше имя:
568 + 18 =
Добавить комментарий к теме:
Ваше имя:
568 + 18 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то лучше сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.

Какую CMS для сайта Вы предпочитаете?


Mail.ru LiveInternet