Новогодняя интерактивная гирлянда и снег на сайт

Новогодняя интерактивная, живая, музыкальная гирлянда на сайт

Этот скрипт создает в шапке сайта яркую и праздничную анимированную, интерактивную гирлянду. При наведении на нее елочные шары начинают покачиваться и издавать волшебные звуки.

Добавить приведенный ниже код в header:

<link rel="stylesheet" href="http://uguide.ru/js/script/ds-lights-muzik.css">
<script type="text/javascript" src="http://uguide.ru/js/script/ds-lights-muzik.js"></script>
<script type="text/javascript" src="http://uguide.ru/js/script/ds-lights-muzik1.js"></script><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">
<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>

 

Украшение на новый-год — курсор с падающим снегом

Вставить приведенный ниже код в footer:

<script type="text/javascript" src="http://uguide.ru/js/script/snowcursor.min.js"></script>

Enjoy!

Поделись, если оказалось полезно :)
Нет комментариев

Написать