devreadwrite.com
Гирлянда будет выглядеть следующим образом:
При наведении на шары они будут покачиваться.
И так, приступим. Скачиваем архив:
Подключаем js и css:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="path/to/newyear.js"></script> <link href="path/to/newyear.css" rel="stylesheet" />
Далее добавляем 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">
<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>
Все. После внесения изменений получим новогоднюю гирлянду на сайте:
Подборка адаптивных шаблонов для вашей CMS
Статьи по 
Как получить и установить HTTPS сертификат на сайта
Комментарии
Комментарии отсутствуют, Вы можете быть первым