Звенящиие шарики при наведении курсора на новогодней гирлянде


Я уже публиковал код новогодней гирлянды с "качающимися" шариками: http://blogodel.com/2012/12/novogodnjaja-girljanda-blogger-blogspot.html

В этот раз шарики качаются и звенят при наведении курсора.


Как всегда код адаптирован для Блогспот, и вставляется очень просто (одним телодвижением):

В Дизайн - Добавить гаджет - HTML/JavaScript  


<div class="b-page_newyear">
<div class="b-page__content">
 <!-- новогодняя мотня newyear.html -->
        <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"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n9 b-ball_bounce"><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"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n9 b-ball_bounce"><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"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n9 b-ball_bounce"><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"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n9 b-ball_bounce"><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"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n9 b-ball_bounce"><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"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n9 b-ball_bounce"><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"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n2 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n3 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n4 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n5 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n6 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n7 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n8 b-ball_bounce"><div class="b-ball__right"></div><div class="b-ball__i"></div></div>
            <div class="b-ball b-ball_n9 b-ball_bounce"><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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  <script src="http://megascripts.ru/demo/new_year_motnya/swfobject.min.js" type="text/javascript"></script>  <script src="http://megascripts.ru/demo/new_year_motnya/newyear.js" type="text/javascript"></script><link href="http://megascripts.ru/demo/new_year_motnya/style.css" rel="stylesheet" />


Лучшая благодарность автору - это нажатые социальные кнопки!


35 коммент.:

Людмила Геннадиевна
Добрый вечер! Очень красиво и музыкально! Установила себе в блог, но подскажите, как поставить гирлянду сверху, как в Вашем блоге? Спасибо!

https://www.blogger.com/profile/12312202063366350537

Justus
Ув. Людмила Геннадиевна, к сожалению у всех шаблоны и размеры разные, поэтому скрипт не всем подходит. Попробуйте аналогичный код:
http://blogodel.com/2012/12/novogodnjaja-girljanda-blogger-blogspot.html

https://www.blogger.com/profile/13746790384341325111

Oxa
Спасибо, Юстус.

https://www.blogger.com/profile/04969712913211959393

Анонимный
Благодарю!

блог Татьяны Коноваловой
Спасибо, Юстус, установила и тот и другой гаджет и получилось очень красиво и нарядно, вот прошу посмотреть http://konovalovatanya.blogspot.ru/
Спасибо ещё раз. С наступающими вас праздниками.

https://www.blogger.com/profile/00056077849840177938

Татьяна
Спасибо! Звенят!

https://www.blogger.com/profile/17464368553613203962

Aksinia Bogdanova
Все так по новогоднему везде ))))), а у нас в крае потепление до +15° ))) Вика, с наступающим!!!!

https://www.blogger.com/profile/17202010642585271084

Бэла Олеговна
Спасибо огромное!

https://www.blogger.com/profile/13292553380645523781

Jelena
Спасибо, уже украсила свой блог, но они у меня молчат, хотя блог связан с музыкой ...:))

https://www.blogger.com/profile/05503505279570341796

Justus
Jelena, с моего комп...ра шарики на вашем блоге звенят! Проверьте с другого компа или браузера! Кстати я бывший Таллинец.

https://www.blogger.com/profile/13746790384341325111

Jelena
Спасибо, Justus, проверю с рабочего. А бывших Таллинцев не бывает...:)) Таллинн остаётся навсегда в сердце...это же ТАКОЙ город....
Привет передаю из Прибалтики...

https://www.blogger.com/profile/05503505279570341796

Анонимный
А на джумле такое можно сделать?

Валентина Сергиенко
Спасибо качаются,звенят и украшают !!!

https://www.blogger.com/profile/03478560988612482619

Maximilian Edelman
Дякую

https://www.blogger.com/profile/02924944325248862173

Andrei Conan
Спасибо) А то не знал даже чем блог на новый год украсить)

http://www.money-power.ru/

Александр Кучеренко
Красивая вещ, спасибо. Повезло, первый раз в этом году наткнулся на это украшение у вас и здесь же код, вобщем повезло.

https://www.blogger.com/profile/12076955018607287668

ВИКТОРИЯ ГРИГА
БОЛЬШОЕ СПАСИБО ЗА НОВОГОДНЕЕ НАСТРОЕНИЕ!!!

https://www.blogger.com/profile/11911262335701532530

O6OPoTEHb
Вот так спасибо огромное! Пару лет уже хотел эти шарики себе установить, да не знал как. А тут такой новогодний подарок! Вот только сегодня о вашем блоге узнал. Теперь изучать подробнее буду )))

https://www.blogger.com/profile/15632760316875700053

Наталия Шестернина
Большое спасибо! Красота!!!

https://www.blogger.com/profile/13873286753674242927

александр шигарин
Воспользовался предлагаемым скриптом и установил музыкальную гирлянду на свой блог на Вордпресс. Получилось. Работает. Только частично прикрыла заголовок первого поста. Спасибо!

https://www.blogger.com/profile/11798815153988271223

Елена
Спасибо - отличные коды.

http://bulionchik.com/

Елена
У Вас Юстас, очень полезный блог, столько "вкусняшек". Спасибо, что делитесь с нами)))

http://bulionchik.com/

Александр Ульянов
У меня получилось - http://zolotaalihoradka.blogspot.ru/2015/08/windows-10-7.html

https://www.blogger.com/profile/06889739057476729321

Mar-ta
Очень красиво. Только выше шапки не могу вставить.((

https://www.blogger.com/profile/18216035155486474986

Justus
Не совсем понял, в чем проблема?

https://www.blogger.com/profile/13746790384341325111

Маргарита
http://posidelochki.blogspot.ru/ это всё, выше - над шапкой не могу вставить. что не так?

https://www.blogger.com/profile/08350360290735060584

Justus
Выше не будет. Причина - шаблон вашего блога! Так бывает, шаблоны у всех разные и не ко всем скрипт подходит!

https://www.blogger.com/profile/13746790384341325111

Маргарита
Печально. Такие шарики красивые. Блог давно создала, вот решила немного подправить Спасибо Вам большое за ответ.

https://www.blogger.com/profile/08350360290735060584

Шамиль Ганеев
Благодарю Justus, только с вашего сайта установленный код заработал,спасибо большое,вот мой сайт http://infobizgan.ru/

https://www.blogger.com/profile/13426438548467011711

forum discografy net
да теперь звенят спасибо

но в варианте 1 при прокрутке сайта колокольчики были всегда в верху

в варианте два они уходят в верх вместе с прокруткой страницы

https://www.blogger.com/profile/05258471238588743808

Марина Петрова
ПОМОГИТЕ, НЕ ЗВЕНЯТ КОЛОКОЛЬЧИКИ, В СОЦСЕТИ ДОБАВИЛАСЬ!!!!

https://www.blogger.com/profile/10535829200979943462

Юлія Колтипіна
Спасибо большущее!!!!)

https://www.blogger.com/profile/17822519650127456086

L Babakulov
а вот за это ОГРОМНОЕ СПАСИБО!

https://www.blogger.com/profile/13826636169378335133

Valentina Kozak
Большое спасибо вам Юстус за такую новогоднюю красоту! Но у меня проблема, скопировала данный вами код на шарики, вставила у себя в блоге, но они не появились.. что не так? мой блог https://valentinakozak.blogspot.ru/

https://www.blogger.com/profile/04226333216875144905

ирина леонидовна
Здравствуйте. Красиваягирлянда и я хотела бы установить её в своей группе. у меня только страничка в ВК. не подскажете пошагново. что нужно сделать, чтобы установить её здесь? а то я не понимаю. ясовсем чайник https://vk.com/public173237209

https://www.blogger.com/profile/03535883167501670041

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

Дорогие Друзья! К сожалению, по причине здоровья, моя активность по этому блогу будет осуществляться по мере ВОЗМОЖНОСТИ!

Доска почета

Плюсани блог!