• Новогодняя мотня

    Блог

    Персональный блог

Новогодняя мотня

Новогодняя мотня

Без использования flash под работу в современных браузерах.

  • Работает в Edge, Chrome, Firefox, Opera.
  • IE11 и ниже не поддерживаются.

Safari нет возможности по тестировать, но в теории с версии 7 должно работать.
Функционал новогодней гирлянды остался таким же.
При наведении курсора шарики покачиваются и издают звук.
Сохранена возможность проигрывать звук на клавиатуре, плюс добавлена реакция шариков на нажатие клавиш (раньше при нажатии на клавиши был только звук, теперь шарики двигаются)
Тестируйте, комментируйте если что не так. И всех с наступающим Новым годом.

HTML

Вот этот код вставляем после тега body:

CSS

В CSS стилях возможно придется слегка вам подправить значения ширины, margin, top, чтобы выровнять расположение новогодней мотни на страничке.

JS

Подключаем скрипт:

В архиве со скриптом теперь есть папка audio со всеми нотками в mp3 формате.
Пути до аудио файлов в скрипте скорее всего потребуется поменять на абсолютные.
Для этого в файле script.js ищем строчку:

И корректируем в зависимости от расположения папки audio на сайте.
Например,

Звука может не быть, если в консоли возникает ошибка:

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Значит у вас снова что-то не правильно прописано в переменной path
Не пишите там http://или http://www. это приводит к такой ошибке если на сайте не разрешены кроссдоменные запросы. У вас папка аудио лежит на вашем домене, поэтому используйте просто слеш в начале / и далее путь до папки audio (как показано выше в примере)

Почему нужно использовать новую версию мотни 2.1 и почему перестал работать звук в старой версии ?

Звук в старой версии работал на технологии flash, который в скором времени будет упразднен и шаги в эту сторону идут полным ходом.

Компания Adobe полностью прекратит поддержку и распространение технологии Flash Player в конце 2020 года.
Google отказалась от автозапуска Flash-элементов в браузере Chrome в конце 2016 года. О готовности отказаться от Flash также заявили Microsoft и Mozilla.

upd: v.2.1 Убрана зависимость от jQuery, добавлена поддержка клавиатуры на двух раскладках (en, ru) (thanks БобрДобр).

 

Исходники

newyear_garland

 

Свяжитесь со мной

Используйте эту форму, чтобы рассказать мне о целях и потребностях вашего проекта.

[contact-form-7 404 "Not Found"]