Содержание
Украсить свой сайт перед Рождеством и Новым годом очень просто. Установите скрипт и на сайте появятся красивые снежинки.
Как установить снежинки на свой сайт
Если вы не захотите заморачиваться: скачивать файл и загружать его на свой хостинг, можете просто добавить одну строку в шаблон вашего сайта.
Перед закрывающим тегом </body> вставьте код:
<script src="http://www.fortress-design.com/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>
Скрипт буржуйский и пожтому комментарии на английском языке. Но программерам английский язык — родной. Надеюсь с этим сложностей не возникнет.
Известные проблемы со скриптом
Оригинальный скрипт не лишен недостатков. Но все они уже успешно устранены.
- На широкоформатном мониторе снежинки не заполняли всю доступную область. В ява скрипте я не особо разбираюсь. Поэтому исправить недочет в этом скрипте я попросил своего талантливого друга Дениса Балыкина, известного в сети под ником BaDeVlad. Он быстро разобрался в чужом коде и отредактировал его как надо.
- У скрипта был очень серьезный недочет. Скрипт не работал не только в
Doctype Strict, но и вообще не поддерживал веб-стандарты. Я перепроповал все доктайпы, — ни один из них не позволял появлению осадков в виде снега. Позже, в комментариях, Алексей Юдин дал рецепт от излечения этого тяжелого недуга. Нужно было указать единицы измерения, в конце некоторых строк добавив+'px';
Как подключить скрипт со снежинками на свой хостинг
- Скачайте скрипт и разместите на своем хостинге.
- Укажите место, где находится скрипт следующей конструкцией
<code><script src=»/путь_к_ скрипту _со_ снежинками /snow-fall.js» type=»text/javascript»></script></code>
Например, если вы положите скрипт в папку js, которая находится в корне вашего сайта, тогда подключение скрипта будет таким: добавьте вот эту строку в шаблон сайта, например перед тегом body:
<script src="/js/snow-fall.js" type="text/javascript"</script>
Скачать скрипт
Сколько весит скрипт с бесконечно падающими снежинками? Всего 4,3 килобайта вместе с комментариями :).
Больше снега!
Есть еще альтернативный вариант падающих снежинок, который реагирует на движение курсора. Он находится по адресу: www.schillmania.com/projects/snowstorm/
Если вы нашли другие хорошие скрипты со снежинками или с новогодней тематикой, можете поделиться ссылкой в комментариях.
***
Чтобы зарядиться хорошим настроеним, можете посмотреть красивую съемку езды на сноуборде по красивому снежному лесу.
