How do I achieve this effect and what is wrong with my JavaScript code?

Question

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 this page .

In css file I have: noise-bck--1 , noise-bck--2 , noise-bck--3 which have different backgrounds, and in JavaScript I tried to loop over them with setInterval but something is wrong.

The images from the effect are available on these links, please download them:

bg1.png

bg2.png

bg3.png

Here is my snippet:

 (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; } } }()); 

 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'); } 

 <div class="noise-bck"></div> 

Answer 1

In your snippet the query selector is looking for a tag named noice-bck

var frontBck = document.querySelector('noice-bck');

Try changing the query selector to look for an element with the class noice-bck instead.

var frontBck = document.querySelector('.noice-bck');

And.. you counter increases indefinitely..

Answer 2

You should use CSS3 animations instead of javascript timers. See an example here .

Answer 3

Your mistakes are structural. document.querySelector('noise-bck') selects the first <noise-bck> element, which is not a valid element. You may have meant to select the element with class="noise-bck" (via document.querySelector('.noise-bck') . It is also better to write the setInterval() function separately rather than inside a variable. Here is the corrected code (notice that I have used the body element rather than that you are looking for using document.querySelector() .

 (function() { var frontBck = document.querySelector('.noise-bck'); var count = 0; 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); } }()); 

 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'); } 

 <div class="noise-bck"></div> 

Answer 4

@Andrej Tomas - Take a look here , I am looping background images using CSS3 animation.

@-webkit-keyframes example {
0%   {background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);}
25%  {background-image: url(https://s-media-cache-ak0.pinimg.com/736x/9b/a2/57/9ba25796112cad616be27e473ae1e149.jpg);}
50%  {background-image: url(https://s-media-cache-ak0.pinimg.com/736x/ce/5f/53/ce5f53437e291c48705428721406985c.jpg);}
100% {background-image: url(http://static.zikvid.com/crop/-/480/uploads/apps/games/560c672ea57e1f2dead096834d82a1db.jpg);}
}