title: How do I achieve this effect and what is wrong with my JavaScript code?
body: <p>I am trying to achieve this background effect, which changes the similar backgrounds and the result is glitchy, old TV like effect, which can be seen on <a href="https://philcasabon.com/" rel="nofollow noreferrer">this page</a>.</p>
  
  <p>In css file I have: <code>noise-bck--1</code>,<code>noise-bck--2</code>,<code>noise-bck--3</code> which have different backgrounds, and in JavaScript I tried to loop over them with <code>setInterval</code> but something is wrong.</p>
  
  <p>The images from the effect are available on these links, please download them: </p>
  
  <p><a href="https://drive.google.com/open?id=0B_TUyMZvjkjVZW8zVDUwZ1dkSVE" rel="nofollow noreferrer">bg1.png</a></p>
  
  <p><a href="https://drive.google.com/open?id=0B_TUyMZvjkjVOUhLR0hLZEJEaHc" rel="nofollow noreferrer">bg2.png</a></p>
  
  <p><a href="https://drive.google.com/open?id=0B_TUyMZvjkjVbnB4YjA2Wkx5eGM" rel="nofollow noreferrer">bg3.png</a></p>
  
  <p>Here is my snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
    var frontBck = document.querySelector('.noise-bck');
    var count = 0;
    var i;
    i = setInterval(update, 100);
  
    function update() {
      frontBck.classList.remove('noise-bck--1');
      frontBck.classList.remove('noise-bck--2');
      frontBck.classList.remove('noise-bck--3');
      count++;
      frontBck.classList.add('noise-bck--' + count);
      if (count == 4) {
        count = 1;
      }
  
  
    }
  
  }());</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
    font-size: 100%;
  }
  .noise-bck {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .noise-bck--1 {
    background-image: url('bg1.png');
  }
  .noise-bck--2 {
    background-image: url('bg2.png');
  }
  .noise-bck--3 {
    background-image: url('bg3.png');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="noise-bck"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>