Добавляем снег и гирлянду на страницу html + js

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


Скопируйте код на страницу перед закрывающим тегом </body>


Простой снег:

<script type='text/javascript' src='http://mvcreative.ru/example/6/1/snow.js'></script> 
<script type='text/javascript'> 
var aaSnowConfig = {snowflakes: '200'}; 
</script>

Снег который летит за курсором и остается внизу

<script type="text/javascript"> 
imageDir = "http://mvcreative.ru/example/6/2/snow/"; 
sflakesMax = 65; 
sflakesMaxActive = 65; 
svMaxX = 2; 
svMaxY = 6; 
ssnowStick = 1; 
ssnowCollect = 0; 
sfollowMouse = 1; 
sflakeBottom = 0; 
susePNG = 1; 
sflakeTypes = 5; 
sflakeWidth = 15; 
sflakeHeight = 15; 
</script> 
<script type="text/javascript" src="http://mvcreative.ru/example/6/2/snow.js"></script>

А вот очень красивые анимированные шарики которые звенят  если на них навести курсор мышки

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

Гирлянды которые мигают без gif картинок, все работает на js и по этому не занимает много места

<style type="text/css">
    #garland {
        position: fixed;
        top: 0px;
        left: 0;
        background-image: url('http://getsuper.ru/templates/-/js/girr/christmas-lights.png');
        height: 36px;
        width: 100%;
        overflow: hidden;
    }
    #nums_1 {
        padding: 100px
    }
    .garland_1 {
        background-position: 0 0
    }
    .garland_2 {
        background-position: 0 -36px
    }
    .garland_3 {
        background-position: 0 -72px
    }
    .garland_4 {
        background-position: 0 -108px
    }
</style>
<div id="garland" class="garland_4"><div id="nums_1">1</div></div>
<script type="text/javascript">
    function garland() {
        nums = document.getElementById('nums_1').innerHTML
        if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementById('nums_1').innerHTML='2'}
        if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementById('nums_1').innerHTML='3'}
        if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementById('nums_1').innerHTML='4'}
        if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementById('nums_1').innerHTML='1'}
    }
    setInterval(function(){garland()}, 600)
</script>