Achieving a scratcy/noisy effect on an image

Question

I want to achieve an effect on an image, which triggers once in a while, on the frontpage on my webpage, just for the effect of it.

I searched the web for it but got no hits. Anyone who knows how to make an effect similar to the picture i attached?

Its kinda like a distorted, noisy, scratchy effect, that takes a plain normal image and distorts it and then reverts it into normal again.

Is this achievable in css3/jquery or something similar? noise effect http://ak.picdn.net/shutterstock/videos/4183625/preview/stock-footage-turn-on-and-off-tv-noise-effect-with-some-lens-flare.jpg

Regards

Answer 1

You can achieve the effect by drawing the image on a canvas and then manipulate the pixels using JavaScript.

You can achieve pretty much anything. Here's an example of some waves: http://lislis.sakura.ne.jp/canvas/wave/wave02.html

Converting image to greyscale: http://www.html5canvastutorials.com/advanced/html5-canvas-grayscale-image-colors-tutorial/