Новорічні гірлянди в блог на Blogger

Наближається Новий рік, тож новорічне оформлення блогу буде дуже доречним. Пропоную коди двох гарних новорічних гірлянд в шапку блогу. Щоб їх додати, слід перейти на вкладку Дизайн, клікнути Додати гаджет. обрати   HTML/JavaScript, і вставити у нього наступний код.

Статична пухнаста гірлянда:

<!--Novogodnja motnja ot Blogger.vipbiz.org--> <div style="padding: 0px;">
<img class="st1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg78WPyiK8X2GNrexP2vtpngmmTonNAtfpctoK5B3jL1Qw2EidFqQwEIurndOQw-B-cvT01hVER_xZzqHrn3TMMrVfl2z4XRBKzqcponBb9t5y4azL3hUeVn3VKq6Fwj0B9Zfkjmpgber13/s800/b-ball_n4.png" style="position:fixed; top: 0px;left:150px;border:none;z-index:10;" /><img class="st2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZixKLpCeSzo23C4noeznnYkH6ASECmx9iQZrhRQw4X-gBiDliprCNnD6yCdvnR8bajUvoJzXakiKIQ2VKgMZ2Ht1AjFuF21HS0w1l1DTNwjE02_35AgK0Oc0i0jAFw351KAReEXS2OzMP/s800/b-ball_n2.png" style="position:fixed; top: 0px;left:450px;border:none;z-index:11;" /><img class="st1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkpLuMBdOQmdPhvyeVXko1Mh74olx2dZ2I-ASqa8Uq6di6ZLcGTKWKsZYD3pw18HKhmpZkX6h9x_Unauie_4Lna4Jl2oQNysEzmm8xvJ_GKzNngCSyJsU69Z6BB5AeIS9IjgqwFU-yxF-3/s800/b-ball_n3.png" style="position:fixed; top: 0px;left:750px;border:none;z-index:10;" /><img class="st2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg78WPyiK8X2GNrexP2vtpngmmTonNAtfpctoK5B3jL1Qw2EidFqQwEIurndOQw-B-cvT01hVER_xZzqHrn3TMMrVfl2z4XRBKzqcponBb9t5y4azL3hUeVn3VKq6Fwj0B9Zfkjmpgber13/s800/b-ball_n4.png" style="position:fixed; top: 0px;left:1050px;border:none;z-index:11;" /><img class="st1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZixKLpCeSzo23C4noeznnYkH6ASECmx9iQZrhRQw4X-gBiDliprCNnD6yCdvnR8bajUvoJzXakiKIQ2VKgMZ2Ht1AjFuF21HS0w1l1DTNwjE02_35AgK0Oc0i0jAFw351KAReEXS2OzMP/s800/b-ball_n2.png" style="position:fixed; top: 0px;left:1350px;border:none;z-index:10;" /><img class="st2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkpLuMBdOQmdPhvyeVXko1Mh74olx2dZ2I-ASqa8Uq6di6ZLcGTKWKsZYD3pw18HKhmpZkX6h9x_Unauie_4Lna4Jl2oQNysEzmm8xvJ_GKzNngCSyJsU69Z6BB5AeIS9IjgqwFU-yxF-3/s800/b-ball_n3.png" style="position:fixed; top: 0px;left:1650px;border:none;z-index:11;" /><img class="st" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZixKLpCeSzo23C4noeznnYkH6ASECmx9iQZrhRQw4X-gBiDliprCNnD6yCdvnR8bajUvoJzXakiKIQ2VKgMZ2Ht1AjFuF21HS0w1l1DTNwjE02_35AgK0Oc0i0jAFw351KAReEXS2OzMP/s800/b-ball_n2.png" style="position:fixed; top: 0px;left:1950px;border:none;z-index:11;" /></div>
<div style="padding: 0px;">
<img class="st" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZixKLpCeSzo23C4noeznnYkH6ASECmx9iQZrhRQw4X-gBiDliprCNnD6yCdvnR8bajUvoJzXakiKIQ2VKgMZ2Ht1AjFuF21HS0w1l1DTNwjE02_35AgK0Oc0i0jAFw351KAReEXS2OzMP/s800/b-ball_n2.png" style="position:fixed; top: 0px;left:50px;border:none;z-index:11;" /><img class="st" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkpLuMBdOQmdPhvyeVXko1Mh74olx2dZ2I-ASqa8Uq6di6ZLcGTKWKsZYD3pw18HKhmpZkX6h9x_Unauie_4Lna4Jl2oQNysEzmm8xvJ_GKzNngCSyJsU69Z6BB5AeIS9IjgqwFU-yxF-3/s800/b-ball_n3.png" style="position:fixed; top: 0px;left:300px;border:none;z-index:11;" /><img class="st2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg78WPyiK8X2GNrexP2vtpngmmTonNAtfpctoK5B3jL1Qw2EidFqQwEIurndOQw-B-cvT01hVER_xZzqHrn3TMMrVfl2z4XRBKzqcponBb9t5y4azL3hUeVn3VKq6Fwj0B9Zfkjmpgber13/s800/b-ball_n4.png" style="position:fixed; top: 0px;left:600px;border:none;z-index:11;" /><img class="st" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZixKLpCeSzo23C4noeznnYkH6ASECmx9iQZrhRQw4X-gBiDliprCNnD6yCdvnR8bajUvoJzXakiKIQ2VKgMZ2Ht1AjFuF21HS0w1l1DTNwjE02_35AgK0Oc0i0jAFw351KAReEXS2OzMP/s800/b-ball_n2.png" style="position:fixed; top: 0px;left:900px;border:none;z-index:11;" /><img class="st2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkpLuMBdOQmdPhvyeVXko1Mh74olx2dZ2I-ASqa8Uq6di6ZLcGTKWKsZYD3pw18HKhmpZkX6h9x_Unauie_4Lna4Jl2oQNysEzmm8xvJ_GKzNngCSyJsU69Z6BB5AeIS9IjgqwFU-yxF-3/s800/b-ball_n3.png" style="position:fixed; top: 0px;left:1200px;border:none;z-index:11;" /><img class="st" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg78WPyiK8X2GNrexP2vtpngmmTonNAtfpctoK5B3jL1Qw2EidFqQwEIurndOQw-B-cvT01hVER_xZzqHrn3TMMrVfl2z4XRBKzqcponBb9t5y4azL3hUeVn3VKq6Fwj0B9Zfkjmpgber13/s800/b-ball_n4.png" style="position:fixed; top: 0px;left:1500px;border:none;z-index:11;" /><img class="st2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZixKLpCeSzo23C4noeznnYkH6ASECmx9iQZrhRQw4X-gBiDliprCNnD6yCdvnR8bajUvoJzXakiKIQ2VKgMZ2Ht1AjFuF21HS0w1l1DTNwjE02_35AgK0Oc0i0jAFw351KAReEXS2OzMP/s800/b-ball_n2.png" style="position:fixed; top: 0px;left:1800px;border:none;z-index:11;" /></div>
<div style="padding: 0px;">
<img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hnFKlsrjMnMdEXUE2WWHNLD0TE4fM_usYJporIbJnV2exBOFqBvvkA25gkV3r_xQ6iqxXlQBZbL-bnd-xHGqj4ZG2gIt92oy-VvMH-mRMTkCxZ57imyTGNNZtdFv3xZcBin0MvMZeG_c/s300/fon1.png" style="position:fixed; top: 0px;right:0px;border:none;z-index:1;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hnFKlsrjMnMdEXUE2WWHNLD0TE4fM_usYJporIbJnV2exBOFqBvvkA25gkV3r_xQ6iqxXlQBZbL-bnd-xHGqj4ZG2gIt92oy-VvMH-mRMTkCxZ57imyTGNNZtdFv3xZcBin0MvMZeG_c/s300/fon1.png" style="position:fixed; top: 0px;right:250px;border:none;z-index:2;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hnFKlsrjMnMdEXUE2WWHNLD0TE4fM_usYJporIbJnV2exBOFqBvvkA25gkV3r_xQ6iqxXlQBZbL-bnd-xHGqj4ZG2gIt92oy-VvMH-mRMTkCxZ57imyTGNNZtdFv3xZcBin0MvMZeG_c/s300/fon1.png" style="position:fixed; top: 0px;right:500px;border:none;z-index:3;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hnFKlsrjMnMdEXUE2WWHNLD0TE4fM_usYJporIbJnV2exBOFqBvvkA25gkV3r_xQ6iqxXlQBZbL-bnd-xHGqj4ZG2gIt92oy-VvMH-mRMTkCxZ57imyTGNNZtdFv3xZcBin0MvMZeG_c/s300/fon1.png" style="position:fixed; top: 0px;right:750px;border:none;z-index:4;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hnFKlsrjMnMdEXUE2WWHNLD0TE4fM_usYJporIbJnV2exBOFqBvvkA25gkV3r_xQ6iqxXlQBZbL-bnd-xHGqj4ZG2gIt92oy-VvMH-mRMTkCxZ57imyTGNNZtdFv3xZcBin0MvMZeG_c/s300/fon1.png" style="position:fixed; top: 0px;right:1000px;border:none;z-index:5;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hnFKlsrjMnMdEXUE2WWHNLD0TE4fM_usYJporIbJnV2exBOFqBvvkA25gkV3r_xQ6iqxXlQBZbL-bnd-xHGqj4ZG2gIt92oy-VvMH-mRMTkCxZ57imyTGNNZtdFv3xZcBin0MvMZeG_c/s300/fon1.png" style="position:fixed; top: 0px;right:1250px;border:none;z-index:6;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hnFKlsrjMnMdEXUE2WWHNLD0TE4fM_usYJporIbJnV2exBOFqBvvkA25gkV3r_xQ6iqxXlQBZbL-bnd-xHGqj4ZG2gIt92oy-VvMH-mRMTkCxZ57imyTGNNZtdFv3xZcBin0MvMZeG_c/s300/fon1.png" style="position:fixed; top: 0px;right:1500px;border:none;z-index:7;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hnFKlsrjMnMdEXUE2WWHNLD0TE4fM_usYJporIbJnV2exBOFqBvvkA25gkV3r_xQ6iqxXlQBZbL-bnd-xHGqj4ZG2gIt92oy-VvMH-mRMTkCxZ57imyTGNNZtdFv3xZcBin0MvMZeG_c/s300/fon1.png" style="position:fixed; top: 0px;right:1750px;border:none;z-index:8;" /><img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-hnFKlsrjMnMdEXUE2WWHNLD0TE4fM_usYJporIbJnV2exBOFqBvvkA25gkV3r_xQ6iqxXlQBZbL-bnd-xHGqj4ZG2gIt92oy-VvMH-mRMTkCxZ57imyTGNNZtdFv3xZcBin0MvMZeG_c/s300/fon1.png" style="position:fixed; top: 0px;right:2000px;border:none;z-index:9;" /></div>
<!--Novogodnja motnja ot Blogger.vipbiz.org end-->

Новорічна анімована гірлянда зі звуком від Яндексу

<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>

<style>
.b-page__content{
position: fixed;
top: 0;
left: 0;
right: 0;
min-height:115px;
z-index: 2;
}
.b-head-decor{display:none}
.b-page_newyear .b-head-decor{
   position:absolute;
   top:0;
   left:0;
   display:block;
   height:115px;
   width:100%;
   overflow:hidden;
   background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-head-decor_newyear.png) repeat-x 0 0
}
.b-page_newyear .b-head-decor__inner{position:absolute;top:0;left:0;height:115px;display:block;width:373px}
.b-page_newyear .b-head-decor::before{content:'';display:block;position:absolute;top:-115px;left:0;z-index:3;height:115px;display:block;width:100%;box-shadow:0 15px 30px rgba(0,0,0,0.75)}
.b-page_newyear .b-head-decor__inner_n2{left:373px}
.b-page_newyear .b-head-decor__inner_n3{left:746px}
.b-page_newyear .b-head-decor__inner_n4{left:1119px}
.b-page_newyear .b-head-decor__inner_n5{left:1492px}
.b-page_newyear .b-head-decor__inner_n6{left:1865px}
.b-page_newyear .b-head-decor__inner_n7{left:2238px}

.b-ball{position:absolute}
.b-ball_n1{top:0;left:3px;width:59px;height:83px}
.b-ball_n2{top:-19px;left:51px;width:55px;height:70px}
.b-ball_n3{top:9px;left:88px;width:49px;height:67px}
.b-ball_n4{top:0;left:133px;width:57px;height:102px}
.b-ball_n5{top:0;left:166px;width:49px;height:57px}
.b-ball_n6{top:6px;left:200px;width:54px;height:70px}
.b-ball_n7{top:0;left:240px;width:56px;height:67px}
.b-ball_n8{top:0;left:283px;width:54px;height:53px}
.b-ball_n9{top:10px;left:321px;width:49px;height:66px}
.b-ball_n1 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_n1.png) no-repeat}
.b-ball_n2 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_n2.png) no-repeat}
.b-ball_n3 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_n3.png) no-repeat}
.b-ball_n4 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_n4.png) no-repeat}
.b-ball_n5 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_n5.png) no-repeat}
.b-ball_n6 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_n6.png) no-repeat}
.b-ball_n7 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_n7.png) no-repeat}
.b-ball_n8 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_n8.png) no-repeat}
.b-ball_n9 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_n9.png) no-repeat}
.b-ball_i1 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_i1.png) no-repeat}
.b-ball_i2 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_i2.png) no-repeat}
.b-ball_i3 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_i3.png) no-repeat}
.b-ball_i4 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_i4.png) no-repeat}
.b-ball_i5 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_i5.png) no-repeat}
.b-ball_i6 .b-ball__i{background:url(https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/balls/b-ball_i6.png) no-repeat}
.b-ball_i1{top:0;left:0;width:25px;height:71px}
.b-ball_i2{top:0;left:25px;width:61px;height:27px}
.b-ball_i3{top:0;left:176px;width:29px;height:31px}
.b-ball_i4{top:0;left:205px;width:50px;height:51px}
.b-ball_i5{top:0;left:289px;width:78px;height:28px}
.b-ball_i6{top:0;left:367px;width:6px;height:69px}
.b-ball__i{
position:absolute;
width:100%;
height:100%;
-webkit-transform-origin:50% 0;
-moz-transform-origin:50% 0;
-o-transform-origin:50% 0;
transform-origin:50% 0;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out;
pointer-events:none
}
.b-ball_bounce .b-ball__right{position:absolute;top:0;right:0;left:50%;bottom:0;z-index:9}
.b-ball_bounce:hover .b-ball__right{display:none}
.b-ball_bounce .b-ball__right:hover{left:0;display:block!important}
.b-ball_bounce.bounce>.b-ball__i{-webkit-transform:rotate(-9deg);-moz-transform:rotate(-9deg);-o-transform:rotate(-9deg);transform:rotate(-9deg)}
.b-ball_bounce .b-ball__right.bounce+.b-ball__i{-webkit-transform:rotate(9deg);-moz-transform:rotate(9deg);-o-transform:rotate(9deg);transform:rotate(9deg)}
.b-ball_bounce.bounce1>.b-ball__i{-webkit-transform:rotate(6deg);-moz-transform:rotate(6deg);-o-transform:rotate(6deg);transform:rotate(6deg)}
.b-ball_bounce .b-ball__right.bounce1+.b-ball__i{-webkit-transform:rotate(-6deg);-moz-transform:rotate(-6deg);-o-transform:rotate(-6deg);transform:rotate(-6deg)}
.b-ball_bounce.bounce2>.b-ball__i{-webkit-transform:rotate(-3deg);-moz-transform:rotate(-3deg);-o-transform:rotate(-3deg);transform:rotate(-3deg)}
.b-ball_bounce .b-ball__right.bounce2+.b-ball__i{-webkit-transform:rotate(3deg);-moz-transform:rotate(3deg);-o-transform:rotate(3deg);transform:rotate(3deg)}
.b-ball_bounce.bounce3>.b-ball__i{-webkit-transform:rotate(1.5deg);-moz-transform:rotate(1.5deg);-o-transform:rotate(1.5deg);transform:rotate(1.5deg)}
.b-ball_bounce .b-ball__right.bounce3+.b-ball__i{-webkit-transform:rotate(-1.5deg);-moz-transform:rotate(-1.5deg);-o-transform:rotate(-1.5deg);transform:rotate(-1.5deg)}
</style>
<script>
class Balls {
  constructor(context, buffer) {
    this.context = context;
    this.buffer = buffer;
  }
  setup() {
    this.gainNode = this.context.createGain();
    this.source = this.context.createBufferSource();
    this.source.buffer = this.buffer;
    this.source.connect(this.gainNode);
    this.gainNode.connect(this.context.destination);
    this.gainNode.gain.setValueAtTime(1, this.context.currentTime);
  }
  play() {
    this.setup();
    this.source.start(this.context.currentTime);
  }
  stop() {
    var ct = this.context.currentTime + 1;
    this.gainNode.gain.exponentialRampToValueAtTime(.1, ct);
    this.source.stop(ct);
  }
}

class Buffer {
  constructor(context, urls) {
    this.context = context;
    this.urls = urls;
    this.buffer = [];
  }
  loadSound(url, index) {
    let request = new XMLHttpRequest();
    request.open('get', url, true);
    request.responseType = 'arraybuffer';
    let thisBuffer = this;
    request.onload = function() {
      thisBuffer.context
        .decodeAudioData(request.response, function(buffer) {
          thisBuffer.buffer[index] = buffer;
          if(index == thisBuffer.urls.length-1) {
            thisBuffer.loaded();
          }
        });
    };
    request.send();
  };
  getBuffer() {
    this.urls.forEach((url, index) => {
      this.loadSound(url, index);
    })
  }
  loaded() {
    loaded = true;
  }
  getSound(index) {
    return this.buffer[index];
  }
}

let balls = null,
    preset = 0,
    loaded = false;
let path = 'audio/';
let sounds = [
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound1.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound2.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound3.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound4.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound5.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound6.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound7.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound8.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound9.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound10.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound11.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound12.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound13.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound14.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound15.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound16.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound17.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound18.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound19.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound20.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound21.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound22.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound23.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound24.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound25.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound26.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound27.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound28.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound29.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound30.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound31.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound32.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound33.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound34.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound35.mp3',
  'https://raw.githubusercontent.com/newyearsite/newyearsite.github.io/master/audio/sound36.mp3'
];
let context = new (window.AudioContext || window.webkitAudioContext)();

function playBalls() {
  let index = parseInt(this.dataset.note) + preset;
  balls = new Balls(context, buffer.getSound(index));
  balls.play();
}

function stopBalls() {
  balls.stop();
}

let buffer = new Buffer(context, sounds);
let ballsSound = buffer.getBuffer();
let buttons = document.querySelectorAll('.b-ball_bounce');
buttons.forEach(button => {
  button.addEventListener('mouseenter', playBalls.bind(button));
  button.addEventListener('mouseleave', stopBalls);
})

function ballBounce(e) {
  var i = e;
  if (e.className.indexOf(" bounce") > -1) {
  return;
  }
  toggleBounce(i);
}

function toggleBounce(i){
  i.classList.add("bounce");
  function n() {
    i.classList.remove("bounce")
    i.classList.add("bounce1");
    function o() {
      i.classList.remove("bounce1")
      i.classList.add("bounce2");
      function p() {
        i.classList.remove("bounce2")
        i.classList.add("bounce3");
        function q() {
          i.classList.remove("bounce3");
        }
        setTimeout(q, 300)
      }
      setTimeout(p, 300)
    }
    setTimeout(o, 300)
  }
  setTimeout(n, 300)
}

var array1 = document.querySelectorAll('.b-ball_bounce')
var array2 = document.querySelectorAll('.b-ball_bounce .b-ball__right')

for(var i=0; i<array1.length; i++){
  array1[i].addEventListener('mouseenter', function(){
    ballBounce(this)
  })
}

for(var i=0; i<array2.length; i++){
  array2[i].addEventListener('mouseenter', function(){
    ballBounce(this)
  })
}

let l = ["49", "50", "51", "52", "53", "54", "55", "56", "57", "48", "189", "187", "81", "87", "69", "82", "84", "89", "85", "73", "79", "80", "219", "221", "65", "83", "68", "70", "71", "72", "74", "75", "76", "186", "222", "220"];
let k = ["90", "88", "67", "86", "66", "78", "77", "188", "190", "191"];
let a = {};
for (let e = 0, c = l.length; e < c; e++) {
    a[l[e]] = e
}
for (let e = 0, c = k.length; e < c; e++) {
    a[k[e]] = e
}

document.addEventListener('keydown', function (j) {
  let i = j.target;
  if (j.which in a) {
    let index = parseInt(a[j.which]);
    balls = new Balls(context, buffer.getSound(index));
    balls.play();
    let ball = document.querySelector('[data-note="' + index + '"]');
    toggleBounce(ball);
  }
});
</script>