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>

`function update() { frontBck.classList.remove('noise-bck--'+count); count++; if (count>3) count=1; frontBck.classList.add('noise-bck--' + count); }` — mplungjan, Jan 21 '17 at 08:47

score 0 · Accepted Answer · answered Jan 21 '17 at 08:41

0

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

answered Jan 21 '17 at 08:41

How do you know that was not intentional? Could be like street for "nice back"... nice.. noice... noice back... noice-bck ;) – Jan 21 '17 at 09:23

score 0 · Answer 2 · edited May 23 '17 at 10:29

0

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

edited May 23 '17 at 10:29

Community

1
1

answered Jan 21 '17 at 08:45

JVM

946
1
10
23

Some more [documentation](http://www.w3schools.com/css/css3_animations.asp) on css3 animations for you – JVM Jan 21 '17 at 08:49
From your first link: `Background image isn't a property that can be animated - you can't tween the property.` – mplungjan Jan 21 '17 at 08:50
Its not about animating images, emphasis is on looping them. – JVM Jan 21 '17 at 08:52

score 0 · Answer 3 · answered Jan 21 '17 at 08:45

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>

score 0 · Answer 4 · answered Jan 21 '17 at 09:14

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

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

4 Answers4