Пришла зима, пора приукрасить свой сайт в зимнем стиле, поднять настроение посетителям.
Я подобрал несколько вариантов, которые легко установить на сайт простым копированием кода.
Скопируйте код на страницу перед закрывающим тегом
</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>
Автор поста:
Skriptoff,
Просмотров:
13426
Создан:
21 дек. 2016 в
02:03
1