JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<div id="garland" class="garland_4">
  <div id="nums_1">1</div>
</div>

CSS

body {
  background: #000;
}

#garland {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url('http://imapo.ru/img/christmas.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
}

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)