Падающий снег на HTML5 Canvas

Приближается конец 2013 года, и это означает, что Новый год и Рождество не за углом 🙂 Чтобы поддержать праздничное настроение я решил разместить на сайте плагин jQuery, созданный Джейсоном Брауном, который позволяет добавить на сайт красивый интерактивный анимированный снег.

За основу взята статья Create and Control Festive Snow on Your Website using HTML5 Canvas (много букв на английском 😉 ).

Демонстрация  Скачать исходники

Так как это JQuery-плагин нужно указать последнюю библиотеку JQuery отсюда, а jQuery.flipping_gallery.js, можно найти здесь, и добавить в <head> странички или сайта.

Если добавляете в тему wordpress — измените head.php или theme.php (все зависит от выбранной темы)

После тега <body> вставляем следующий код:

И обязательно указываем параметры (можно перед закрывающим тегом <body>):

В файл стилей добавляем следующие строчки:

Возможности плагина:

  • speed: Эта опция позволяет контролировать скорость падения снега. Чем выше, тем быстрее. Рекомендуемые значения находятся где-то между 0 и 5. Значение по умолчанию 0.
  • interaction: Эта опция позволяет включать взаимодействие со снегом. Если установлено true, снег будет реагировать на курсор и отскакивать, создавая красивый эффект взаимодействия. Значение по умолчанию true.
  • size: Определяет средний размер снега. Рекомендуемые значения находятся где-то между 0 и 10. Чем выше, тем больше. Значение по умолчанию 2.
  • count: Максимальное количество снега, падающие на экране одновременно. Значение по умолчанию 200.
  • opacity: Эта опция позволяет контролировать среднюю непрозрачность снега. Установите в 1 для полной непрозрачности. Рекомендуемые значения десятичные между 0.0 и 1.0. Значение по умолчанию 0.
  • color: Цвет снежинки. Приемлемый формат — полные 6 символов HEX-кода цвета (#ffffff). Значение по умолчанию #ffffff.
  • windPower: Определяет, в каком направлении дует ветер. Направо — положительное число, налево — отрицательное. Чем выше (для положительных) / ниже (для отрицательных) число, тем сильнее дует ветер. Значение по умолчанию 0.
  • image: Позволяет использовать свою собственную снежинку, определив путь к файлу изображения. Значение по умолчанию false.

Оставить комментарий