Скрипт «Падающие снежинки»

Украсить свой сайт перед Рождеством и Новым годом очень просто. Установите скрипт и на сайте появятся красивые снежинки.

Как установить снежинки на свой сайт

Если вы не захотите заморачиваться: скачивать файл и загружать его на свой хостинг, можете просто добавить одну строку в шаблон вашего сайта.

Перед закрывающим тегом </body> вставьте код:

<script src="http://atbliss.ru/js/snow-fall.js" type="text/javascript"></script>

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

Скачать скрипт

После нажатия на одну из кнопок ниже, появится ссылка для скачивания файла.

[sociallocker]Скачать скрипт с падающими снежинками (исправленный и дополненный).[/sociallocker]

Вебмастера украшают сайты

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

Главное не перестараться

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

Дело в том, что пользователям, привыкшим к дизайну вашего сайта, новшества могут просто не понравится или они не захотят тратить свое время на привыкание к новому интерфейсу и поэтому покинут сайт. Таким образом снизится конверсия посетителей в покупателей.

Как украсить сайт перед Новым годом

Наиболее простым и безболезненным изменением может быть вариант использования эффекта падающих снежинок.

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

Первая версия скрипта со снежинками. Эту версию скрипта не скачивайте — она сырая.

Скрипт «Падающие снежинки»

Чем же он отличается от других скриптов, генерирующих снежинки? Дело в том, что падающие снежинки не являются изображениями. Падающие снежинки — это обычные символы шрифта (звездочки «*») . То есть форма снежинок зависит от заданного в настройках шрифта. Вы можете выбрать любой другой стандартный шрифт и тогда снежинки будут другими.

Кроме формы снежинок, можно еще задавать цвет, размер, количество и скорость падения.

Настройки скрипта: цвет, форма, размер и количество снежинок

<code>// Set the number of snowflakes (more than 30 - 40 not recommended)</code>
<code>var snowmax=35</code>

<code>// Set the colors for the snow. Add as many colors as you like</code>
<code>var snowcolor=new Array("#b9dff5","#b9dff5","#b9dff5","#b9dff5","#b9dff5")</code>

<code>// Set the fonts, that create the snowflakes. Add as many fonts as you like</code>
<code>var snowtype=new Array("Times")</code>

<code>// Set the letter that creates your snowflake (recommended: * )</code>
<code>var snowletter="*"</code>

<code>// Set the speed of sinking (recommended values range from 0.3 to 2)</code>
<code>var sinkspeed=0.6</code>

<code>// Set the maximum-size of your snowflakes</code>
<code>var snowmaxsize=35</code>

<code>// Set the minimal-size of your snowflakes</code>
<code>var snowminsize=8</code>

<code>// Set the snowing-zone</code>
<code>// Set 1 for all-over-snowing, set 2 for left-side-snowing</code>
<code>// Set 3 for center-snowing, set 4 for right-side-snowing</code>
<code>var snowingzone=1</code>

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

Известные проблемы со скриптом

Оригинальный скрипт не лишен недостатков. Но все они уже успешно устранены.

1. На широкоформатном мониторе снежинки не заполняли всю доступную область. В ява скрипте я не особо разбираюсь. Поэтому исправить недочет в этом скрипте я попросил своего талантливого друга Дениса Балыкина, известного в сети под ником BaDeVlad. Он быстро разобрался в чужом коде и отредактировал его как надо.
2. У скрипта был очень серьезный недочет. Скрипт не работал не только в Doctype Strict, но и вообще не поддерживал веб-стандарты. Я перепроповал все доктайпы, — ни один из них не позволял появлению осадков в виде снега. Позже, в комментариях, Алексей Юдин дал рецепт от излечения этого тяжелого недуга. Нужно было указать единицы измерения, в конце некоторых строк добавив +'px';

Как подключить скрипт со снежинками на свой хостинг

1. Скачайте скрипт и разместите на своем хостинге.
2. Укажите место, где находится скрипт следующей конструкцией

<code>&lt;script src=»/путь_к_ скрипту _со_ снежинками /snow-fall.js» type=»text/javascript»&gt;&lt;/script&gt;</code>

Например, если вы положите скрипт в папку js, которая находится в корне вашего сайта, тогда подключение скрипта будет таким: добавьте вот эту строку в шаблон сайта, например перед тегом body:

<script src="/js/snow-fall.js" type="text/javascript"</script>

Скачать скрипт

Сколько весит скрипт с бесконечно падающими снежинками? Всего 4,3 килобайта вместе с комментариями :).

Больше снега!

Есть еще альтернативный вариант падающих снежинок, который реагирует на движение курсора. Он находится по адресу: www.schillmania.com/projects/snowstorm/

Если вы нашли другие хорошие скрипты со снежинками или с новогодней тематикой, можете поделиться ссылкой в комментариях.

***

Чтобы зарядиться хорошим настроеним, можете посмотреть красивую съемку езды на сноуборде по красивому снежному лесу.