Новогодняя гирлянда для сайта на CSS и JS

Скоро, скоро Новый год и Рождество или наоборот. Но всё уже готовятся к этим праздникам. Вебмастера тоже не исключение. И каждый веб-мастер стремится украсить свой блог. Будь то снег , красивая метель или гирлянда. В отличие от прошлых опубликованных сниппетов гирлянд, данная анимированная гирлянда использует для работы по мимо CSS, ещё и скрипты. Суть заключается в использовании картинки в формате PNG и скрипта, который показывает данную картинку частями. Давайте приступим к установке:

HTML

<div id="garland" class="garland_4"><div id="nums_1">1</div></div><div style="position:absolute;top:-1000px"></div>

CSS

<style type="text/css">
#garland {position:absolute;top:0;left:0;background-image:url('https://lenger.kz/uploads/web/christmas-lights.png');height:36px;width:100%;overflow:hidden;z-index:99}
#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>

JS

<script type="text/jаvascript">
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>

Второй вариант гирлянды

CSS

#gir {
  position:fixed;
  top:0;
  left:0;
  background-image:url('https://lenger.kz/uploads/web/christmas-lights.png
');
  height:36px;
  width:100%;
  overflow:hidden;
  z-index:99
}  
#nums_1 {padding:100px}  
.gir_1 {background-position: 0 0}  
.gir_2 {background-position: 0 -36px}  
.gir_3 {background-position: 0 -72px}

Свойство position:fixed заставляет гирлянду прикрепиться к верней части окна.

JS

function gir() {  
  nums = document.getElementById('nums_1').innerHTML  
  if(nums == 1) {document.getElementById('gir').className='gir_1';document.getElementById('nums_1').innerHTML='2'}  
  if(nums == 2) {document.getElementById('gir').className='gir_2';document.getElementById('nums_1').innerHTML='3'}  
  if(nums == 3) {document.getElementById('gir').className='gir_3';document.getElementById('nums_1').innerHTML='1'}  
  }  
  setInterval(function(){gir()}, 500)

Скорость мерцания устанавливается параметром setInterval 

Вот в принципе и всё, в итоге получаем простую, красивую анимированную гирлянду на сайт. Всех с наступающими зимними праздниками!!!