Новогодняя гирлянда Яндекса версия 2018

Автор статьи
Денис Иванов
Время на чтение: 56 минут
АА

Новогодняя мотня Яндекса версия 2018Вот уже совсем скоро. Меньше, чем через месяц грянет самый любимый праздник нашей страны — Новый год! Уря, товарищи! Предлагаю вам украсить свой сайт аккуратной ненавязчивой гирляндой под странным названием «Новогодняя мотня». Легко устанавливается на любую cms.

Новогодняя мотня от Яндекса

Несколько лет назад на входе в почту Яндекса появилось новогоднее украшение в виде ёлочной гирлянды с шарами. При наведении на шары мышью они начинали качаться и издавать звук.

Кто-то извлек код гирлянды со страницы поисковика и выложил его в интернет. Людям понравилось. Яшкины программисты сделали удачное украшение. Никаких бестолковых моргающих лампочек, напрягающих глаза.

Про старую версию мотни я писал в этой статье.

Особенности обновлённой версии гирлянды

  • Работает в Chrome, Opera, Firefox и Edge.
  • Проигрывание звука при нажатии клавиш клавиатуры + движение шаров.
  • Проигрывание звука и движение шаров при наведении указателя мыши.
  • Код отвязан от технологии flash. Так как от этой технологии постепенно отказываются (браузер Chrome уже в 2016 году сократил поддержку флеш), поэтому у гирлянды пропадал звук.
  • Код отвязан от библиотеки jQuery, с которой постоянно возникали конфликты в старой версии.
  • Мной в гирлянду добавлены синие шары. Изначально там только белые и красные.
  • Вместе с гирляндой на сайт добавляется фоновая картинка с зимним лесом.
  • Гирлянда не задерживает загрузку сайта и появляется только в самом конце.

Установка кода на сайт

Архив со скриптом

Скачиваете архив по ссылке ниже. Распаковываете его в корень сайта.

[download url=»/downloads/newyear-balls-2018.rar» title=»Новогодняя мотня Яндекс 2018″]

Вставка кода

Указанный ниже код вставляете в файл footer.php перед тегом </body>.

[html]<div class=»b-page_newyear»>
<div class=»b-page__content»>
<i class=»b-head-decor»>
<i class=»b-head-decor__inner b-head-decor__inner_n1″>
<div class=»b-ball b-ball_n1 b-ball_bounce» data-note=»0″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n2 b-ball_bounce» data-note=»1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n3 b-ball_bounce» data-note=»2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n4 b-ball_bounce» data-note=»3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n5 b-ball_bounce» data-note=»4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n6 b-ball_bounce» data-note=»5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n7 b-ball_bounce» data-note=»6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n8 b-ball_bounce» data-note=»7″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n9 b-ball_bounce» data-note=»8″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
</i>
<i class=»b-head-decor__inner b-head-decor__inner_n2″>
<div class=»b-ball b-ball_n1 b-ball_bounce» data-note=»9″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n2 b-ball_bounce» data-note=»10″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n3 b-ball_bounce» data-note=»11″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n4 b-ball_bounce» data-note=»12″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n5 b-ball_bounce» data-note=»13″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n6 b-ball_bounce» data-note=»14″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n7 b-ball_bounce» data-note=»15″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n8 b-ball_bounce» data-note=»16″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n9 b-ball_bounce» data-note=»17″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
</i>
<i class=»b-head-decor__inner b-head-decor__inner_n3″>
<div class=»b-ball b-ball_n1 b-ball_bounce» data-note=»18″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n2 b-ball_bounce» data-note=»19″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n3 b-ball_bounce» data-note=»20″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n4 b-ball_bounce» data-note=»21″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n5 b-ball_bounce» data-note=»22″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n6 b-ball_bounce» data-note=»23″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n7 b-ball_bounce» data-note=»24″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n8 b-ball_bounce» data-note=»25″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n9 b-ball_bounce» data-note=»26″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
</i>
<i class=»b-head-decor__inner b-head-decor__inner_n4″>
<div class=»b-ball b-ball_n1 b-ball_bounce» data-note=»27″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n2 b-ball_bounce» data-note=»28″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n3 b-ball_bounce» data-note=»29″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n4 b-ball_bounce» data-note=»30″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n5 b-ball_bounce» data-note=»31″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n6 b-ball_bounce» data-note=»32″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n7 b-ball_bounce» data-note=»33″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n8 b-ball_bounce» data-note=»34″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n9 b-ball_bounce» data-note=»35″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
</i>
<i class=»b-head-decor__inner b-head-decor__inner_n5″>
<div class=»b-ball b-ball_n1 b-ball_bounce» data-note=»0″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n2 b-ball_bounce» data-note=»1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n3 b-ball_bounce» data-note=»2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n4 b-ball_bounce» data-note=»3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n5 b-ball_bounce» data-note=»4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n6 b-ball_bounce» data-note=»5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n7 b-ball_bounce» data-note=»6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n8 b-ball_bounce» data-note=»7″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n9 b-ball_bounce» data-note=»8″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
</i>
<i class=»b-head-decor__inner b-head-decor__inner_n6″>
<div class=»b-ball b-ball_n1 b-ball_bounce» data-note=»9″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n2 b-ball_bounce» data-note=»10″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n3 b-ball_bounce» data-note=»11″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n4 b-ball_bounce» data-note=»12″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n5 b-ball_bounce» data-note=»13″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n6 b-ball_bounce» data-note=»14″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n7 b-ball_bounce» data-note=»15″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n8 b-ball_bounce» data-note=»16″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n9 b-ball_bounce» data-note=»17″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
</i>
<i class=»b-head-decor__inner b-head-decor__inner_n7″>
<div class=»b-ball b-ball_n1 b-ball_bounce» data-note=»18″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n2 b-ball_bounce» data-note=»19″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n3 b-ball_bounce» data-note=»20″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n4 b-ball_bounce» data-note=»21″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n5 b-ball_bounce» data-note=»22″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n6 b-ball_bounce» data-note=»23″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n7 b-ball_bounce» data-note=»24″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n8 b-ball_bounce» data-note=»25″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_n9 b-ball_bounce» data-note=»26″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
<div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div>
</i>
</i>
</div>
</div>
<link rel=»stylesheet» href=»/newyear-balls-2018/style.css»>
<script src=»/newyear-balls-2018/script.js» defer></script>[/html]

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

С наступающим праздником вас!

Рейтинг автора
Автор статьи
Денис Иванов
Автор блога, всея заработка в этих ваших интернетах
Написано статей
117
Помогла статья? Оцените её
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 Оценка: 5,00 (голосов: 1)
Загрузка...
Комментарии
  1. eun

    Забавная мотня!

    Если бы не статья — не догадался бы поводить мышкой по шарам. Здорово придумано.

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

    • Денис Иванов

      Да, он же. 

  2. Галина

    Она такая прикольная)) Не помню где и когда увидела, но частенько залипаю на ней)) Но не ставлю на сайт) Я вон еще в ноябре нарисовала себе два баннера, один зимний (у меня теперь сезонная смена банеров))) и новогодний) правда, последний чисто символический, но зато картинка там классная, мне понравилась))

  3. Владимир

    Архив повреждён

    • Денис Иванов

      Никак нет. Проверил. Архив корректный.

      На всякий случай в архив добавлены данные для восстановления.

  4. Олег

    Не работает на вордпрессе. Кидал и в корень сайта, и в тему.

    • Денис Иванов

      У меня вот работает на wordpress.

      Папка должна быть в корне. Код в footer.php. Можете попробовать поместить код в header.php. В этом случае будет грузиться сначала гирлянда, потом сайт.

  5. Василий

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

    • Денис Иванов

      Да, с названием тот, кто слил это с Яндекса явно прикололся. Смотрится красиво и аккуратно. Без раздражающих моргалок, сверкалок.

Добавить комментарий
Adblock
detector