Анимированная гирлянда для украшения шапки сайта к Новому Году

Данный пример оформления сайта к Новому Году очень простой, занимает всего несколько строк кода и подойдет для большинства сайтов.

HTML КОД:

<div class="gir_1" id="gir"></div>

CSS КОД:

#gir {
    position: absolute;
    top: 0;
    left: 0;
    background-image:url('gir.png');
    height: 62px;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none
}  
.gir_1 {
    background-position: 0 0
}  
.gir_2 {
    background-position: 0 -62px
}  
.gir_3 {
    background-position: 0 -124px
}

Если вверху шапки достаточно места, то элемент с гирляндой можно зафиксировать, указав position: fixed; вместо position: absolute;.

В стиле используется картинка:

JAVASCRIPT КОД:

function gir() {
    let nums = document.getElementById('gir').className; 
    if(nums == 'gir_1') {document.getElementById('gir').className='gir_2';}  
    if(nums == 'gir_2') {document.getElementById('gir').className='gir_3';}  
    if(nums == 'gir_3') {document.getElementById('gir').className='gir_1';} 
}  
setInterval(gir, 500);