Компьютеры » Сайтостроительство » Скрипт падающих снежинок
Каждый раз, когда приближается Новый год, у многих владельцев сайтов возникает желание как-то украсить сайт к празднику. Чаще всего такое украшение сводится к пририсовыванию снега или сосулек к шапке сайта или логотипу. Но для создания настоящей новогодней атмосферы хочется внести некое оживление, например, запустить падающие по экрану снежинки.
Скриптов для снежинок в Интернете существует великое множество. Но при более внимательном изучении оказывается, что многие из этих скриптов либо писались еще в эпоху «броузерных войн» и работают только под Internet Explorer и/или Netscape Navigator, либо серьезно тормозят систему, либо создавали неудобство пользователю (например, из-за некоторых скриптов начинают то появляться, то исчезать полосы прокрутки).
В результате решил написать скрипт снежинок сам, используя только стандартные возможности JavaScript и CSS, так, чтобы скрипт работал во всех основных броузерах (проверено в Firefox, Opera, Google Chrome и MSIE). Скрипт не использует графики, а рисует снежинки с помощью символа "*" (звездочка) различных шрифтов и размеров.
Скачать скрипт можно здесь, посмотреть в действии — прямо на этой странице.
Использование скрипта предельно просто: нужно поместить его в корневой каталог сайта и добавить в HTML-код сайта тег <script> для его подключения (рекомендуется добавлять его перед закрывающим тегом </body>):
<script type="text/javascript" src="/snow.js"></script>
При желании вы можете поместить скрипт и в какой-либо другой каталог, но не забудьте при этом скорректировать путь.
Чтобы снежинки не мешали пользователю читать сайт, рекомендуется для блоков с контентом и меню прописать относительное позиционирование и z-index больше единицы (например, style="position: relative; z-index: 100″), тогда снежинки будут пролетать за текстом.
В начало скрипта вынесены некоторые переменные с настройками. Их можно редактировать по своему усмотрению:
- snow_color — массив, в котором перечислены цвета для отрисовки снежинок. Для каждой конкретной снежинки цвет выбирается случайно из этого массива.
- snow_font — массив, в котором задаются шрифты для отрисовки снежинок.
- snow_count — количество снежинок, которое будет на экране одновременно. Несмотря на то, что скрипт достаточно легкий, злоупотреблять количеством не рекомендуется.
- snow_wind_dif — в скрипте предусмотрен эффект ветра, который периодически меняется случайным образом (но изменение происходит плавно) и сносит снежинки в сторону. (Если снежинка долетает до края экрана, то потом она появляется с другой стороны.) В этой переменной задается максимально возможная скорость ветра.
- snow_wind — начальная скорость ветра.
Для ускорения или замедления скорости падения снежинок или скорости изменения ветра можно поменять значения в строках setInterval в конце файла со скриптом.
