С Новым 2015 Годом!

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

Пример такой странички Вы можете наблюдать здесь – http://goloslogos.ru/ny2015.html. Только там гирлянды раскалываются без звука, потому что меня попросили его убрать, и ниже я покажу Вам как это сделать.

Начнём

Итак, гирляндочки и снег придумал не я, а Скот Шиллер. Родная страничка снежного шторма (snowstorm) здесь – http://www.schillmania.com/projects/snowstorm/

Она посвящена снегу, а гирляндочки идут бонусом!

Итак, заходим на https://github.com/scottschiller/snowstorm и скачиваем проект как ZIP-архив (кнопка справа Download ZIP) ну или естесно клонируем её:

git clone https://github.com/scottschiller/Snowstorm.git

Из всего этого проекта нам нужна папочка lights (это виджет с гирляндами) и скрипт snowstorm.js.

Чтобы все это у меня лежало в порядке в одном месте, я закидываю скриптик snowstorm.js в папку lights, а саму папку lights мы закидываем в наш проект.

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

  <link rel="stylesheet" media="screen" href="lights/lights.css" />
  <script src="lights/soundmanager2-nodebug-jsmin.js"></script>
  <script src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/animation/animation-min.js"></script>
  <script src="lights/christmaslights.js?2015"></script>
 
  <script src="lights/snowstorm.js"></script>

Гирляндочки тянут за собой soundmanager2 (крутая либа от того же автора) – для звука взрывающихся гирлянд, и yahoo-dom-event – либу от Yahoo для удобного манипулирования домом. Заметьте, если Вам нужен только снег без гирляндочек, все эти файлики не нужны, надо подключить лишь snowstorm.js и всё!

Но какой Новый Год без гирляндочек, верно? Поэтому нам придётся повозиться.

Далее на страничке где-то вверху ставим div для гирлянд:

<div id="lights">
<!-- Гирлянды будут здесь -->
</div>

В принципе и всё. Можно перезагрузить страницу и наслаждаться гирляндами и снегом! Ура, с праздником вас!

Но! jQuery?

Для работы снега и гирлянд jQuery не нужен.

Но. Но если мы используем jQuery и ествественно везде у нас стоит знак доллара, то lights будут ругаться. Дело в том, что автор скрипта додумался использовтаь этот знак для обертки функции getElementById. Открываем файлик christmaslights.js и в самом верху видим такое:

function $(sID) {
  return document.getElementById(sID);
}

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

Всё, после этого jQuery заработает параллельно с lights!

Убираем звук

После того, как я поставил эти виджеты на страничку, мне позвонили и сказали – А что, там гирлянды со звуком взрываются? Я – Да, это же прикольно! Мне – Убери его, он пугает.

Кого может напугать этот милый чудесный звук лопающихся гирлянд?

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

В том же самом файлике christmaslights.js находим (примерно на 318 строке) такой кусок кода:

if (soundManager && soundManager.ok()) {
  soundManager.play(self.soundID,{pan:self.pan});
  // soundManager.sounds[self.soundID].play({pan:self.pan});
  // if (self.bonusSound != null) window.setTimeout(self.smashBonus,1000);
}

(здесь комментарии не мои, а автора).

Как нетрудно догадаться, почесав репу пару минут (а может и пару часов), здесь происходит создание звука. Теперь просто закомментируем строчку soundManager.play(self.soundID,{pan:self.pan});, сохраним файлик, аплодим его, обновляем HTML – и вуаля. Звука нет!

И это ещё не всё!

Внимательный читатель заметит на страничке http://www.schillmania.com/projects/snowstorm/ описание целого API для управления снегом. Не буду перечислять все возможности этого мощного API, но кое-что отмечу.

Мы использовали такой код в придачу при старте снега (читайте комментарии того, что делает каждая строка):

snowStorm.excludeMobile = false; // включаем поддержку на мобильных устройствах
snowStorm.autoStart = false; // при загрузке страницы не стартуем сразу снег
snowStorm.flakesMaxActive = 50; // максимально кол-во одновременно активных снежинок
snowStorm.freezeOnBlur = true; // останавливать эффект снега при деактивации странички (наверное, полезно всем)
setInterval(snowStorm.toggleSnow, 15000); // вкл/выкл. снег каждые 15 секунд - это уже моё великое изобретение :)

Ещё пара интересных имхо свойств и методов этого замечательного API:

Свойства

snowStorm.followMouse = true; – заставим снег следовать за горизонтальным перемещением указателя мыши.
snowStorm.snowColor = ‘#fff’; – цвет снега – белый, он и так белый, не жёлтый же!
snowStorm.useTwinkleEffect = true; – позволим снегу мерцать периодически во время падения

Методы

snowStorm.freeze(); – заморозим снег
snowStorm.resume(); – разбудим снег из замороженного состояния
snowStorm.toggleSnow(); – вкл/выкл эффект снега
snowStorm.stop(); – полностью убрать эффект снега со странички. Чтобы не замерзнуть совсем…

Всё, на сим раскланиваюсь, надо FTP дорабатывать, я встал что-то на нём.

Благодарю автора снега Скотта Шиллера (Scott Schiller) за этот и другие классные проекты, а также вас, уважаемый читатель, за внимание и стремление к новым знаниям!

Удачи, успеха и удовольствия от работы!
С наступающими праздниками вас, друзья – всех с Великим Новым Годом, и православных – с Великим Рождеством!