Animated Noise Background with JS and or CSS

I was just wondering if anyone has ever seen an effect like this done with JS or CSS? Or even what something like this would be called, so I can begin searching around.
I’ve searched codepen and have found things similar, but not close enough to this.

Any help would be appreciated.

Warning: The link below apparently freezes Firefox as mentioned by @coothead so best to only visit on Chrome or not at all sorry.

I saw this on codepen a while ago. It seems to be close to what you are asking for.

That was a pity. :rolleyes:

Unfortunately, I was foolish enough to click the link,
upon which my Firefox browser immediately froze. :eek:

I have made a mental note to remind myself to disable
“JavaScript” when following links from" Sitepoint", which
of course, requires it enabled to work as intended. :wonky:

coothead

2 Likes

Whoops, sorry about that. :blush: It was working fine in Chrome but it does seem to freeze Firefox so perhaps best not to visit.

I will place a warning on the link.

2 Likes

No problem sir, I’ve stopped my whinging, and
have now returned to my normal benign state. :wonky:

coothead

1 Like

With JavaScript code like this I’m not entirely surprised.

  var flicker = function() {
    ب_ب = document.getElementById('canv');
    ಥ_ಥ = ب_ب.getContext('2d');
    ب_ب.width = w = 700;
    ب_ب.height = h = 500;
    ಥ_ಥ.fillStyle = 'hsla(255,255%,255%,1)';
    ಥ_ಥ.fillRect(0, 0, w, h);
    ಥ_ಥ.fill();
    imgData = ಥ_ಥ.getImageData(0, 0, w, h);
    px = imgData.data;
    static();
  };
1 Like

Means nothing to me!

I found another example but I would visit at your own risk as it again seems very browser intensive.

Here’s my attempt just using CSS and 2 small images.

I’m sure it could be improved on with a bit of patience :slight_smile: (maybe use linear gradients instead of images)

4 Likes

Wow!

(Sorry, but a “like” just wasn’t enough. )

1 Like

Wow!

Thank you to everyone who responded, it has been an immense help, but especially thanks for this @PaulOB!

Fantastic and a huge step in a direction to start piecing something together for this project!

I will post some results on my end when I come up with something.

UPDATE: http://codepen.io/ryanmunger/pen/PbyGQP

Hey guys. I feel like I am getting a lot closer with this technique.

After zooming into the gif, I noticed it’s just a bunch of little bars, that cycle through 4 shades (white to black).

This code pen is obviously not very performant at all and has some issues with the timing of cycling through all 4 colors.

I’m just wondering if there is any feedback based on this current implementation.

Here are some things I am aware of:

  • Optimizing the effect to go full screen with it (maybe use canvas instead of looping through a bunch of divs using jQuery? (ugh, I know))

  • Get the animation of each little “bar” just right, so that it doesn’t reset. Notice all of the “lights” kind of go out at the end of the animation

  • Set variables to control the colors and speed

Again, thanks for all your help. Learning a lot on this one!

Hi,

I think that demo is too intensive. It creates 1000 divs and then sets different css for each of them and then animates all 1000 resulting in compiled css of over 7000 lines long!! 1000 animations at the same time are going to kill most browsers.

I feel you are better off experimenting with the method I have shown above (no js needed) which uses 2 small images and 25 lines of code. I’m sure by adding perhaps a couple more images (which you could turn into data urls to avoid http requests) you could get results close to what you want with some planning of the images and their individual animation.

As seen from the other ‘canvas’ demos they all seem to take a toll on the browser and are probably only suitable for demos.

If you don’t want to use images you could experiment with the same format as my demo using linear gradients but will again need some thought and planning going into it.

2 Likes

@PaulOB Yeah, I don’t really think there is any way around not using an image, in order to get the best performance.

Here is another shot at it, that I think basically captures the essence of the original. It still needs to have the black spots on the overlaying section dissolve out as well.

Still a WIP code wise, but i think this pretty much achieves the desired effect, for now.

Thanks for all the help, and as always, any other feedback is always welcome!

2 Likes

Looks pretty good to me :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.