оНовоГоживаем сайт: летающие снежинки на jQuery

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

Предлагаю один из вариантов реализации такого «украшательства» средствами jQuery.

Делаем

За основу был взят jQuery-плагин jSnow, разработанный нашим нерусским коллегой DuMmWiaM`ом, который так же, как и мы с вами, к Друпалу весьма и весьма не равнодушен.

Прежде всего скачайте сам плагин. На сайте его автора или из аттача к данной публикации.

Для использования нам будет нужен файл jsnow.js. Его мы кидаем в папку нашей текущей темы (или в ее подпапку, где у вас хранятся скрипты темы).

Далее, открываем файл template.php темы, и добавляем в него строчку:

drupal_add_js(path_to_theme() .'/подпапка_темы_со_скриптами/jsnow.js');

Теперь мы можем задействовать мощь плагина вызовом его конструкцией:

<script type="text/javascript">
$(function() {
$().jSnow();
});
</script>

При вызове функции jSnow() можно дописать к ней настройки работы плагина, переписывающие те, что «зашиты» в ней по-умолчанию. Например:

<script type="text/javascript">
$(function() {
$().jSnow({
flakes: [20], /* Количество хлопьев в вашем снегопаде (по умолчанию - 50) */
flakeColor:["rgb(248,248,248)", "rgb(255,255,255)"], /* Цвет снежинок. Можно сделать разноцветным, как в примере, или задать один основной. По умолчанию цвет - белый (#fff;). */
flakeMaxSize: [цифра], /* Максимальный размер снежинок в пикселях (по умолчанию - 20) */
flakeMinSize: [цифра] /* Минимальный размер снежинок в пикселях (по умолчанию - 10) */
});
});
</script>

Все доступные к изменению параметры можно узнать на домашней странице плагина(ссылка выше).

Куда и как поместить вызов функции

Вариантов много.

Можно «вручную» добавить JavaScript-код в файлы page.tpl.php или node.tpl.php темы.

Или добавить в тот же template.php(справедливо и для page.tpl.php с node.tpl.php) код:

drupal_add_js('$(function() { $().jSnow(); });;', 'inline');

В моем случае код вызова был добавлен в сам файл плагина - jsnow.js. Ничего греховного в таком поступке тоже нет. Единственно, что вызываться эффект будет для всех страниц сайта, но в данном случае именно это нам и надо. Этот, слегка отредактированный jsnow.js, и находится в приаттаченном архиве.

Ну и не могу удержаться напоследок от громких напоминаний: после всех исправлений и добавлений в файлы темы ОБЯЗАТЕЛЬНО ПЕРЕСОХРАНЯЙТЕ ТЕМУ И ОЧИЩАЙТЕ КЭШ. Иначе каких бы то ни было изменений можно не увидеть и до следующего Нового Года.

С неизбежно Наступающим нас всех. Аривидерчи.

Прикрепленные файлы
Dalay

Комментарии

О, вовремя. То, что надо.