Static / noise animation using HTML5 canvas

Question

So, I just explored a whole new website at Awwwards . One of them, especially that blew my mind, was this . I just made some basic CSS intermediate material. I was wondering how these guys get this noise / breaking their fonts? I don’t know at all. Tried to check the code, could not understand much.

I know that in the near future I am not able to build all this, but I like the idea of ​​a noisy background.

How to do it? Any pointers would be appreciated :)

Answer 1

Here is the SVG Luke Bebber Glitch effect.

Here is the original and working demo

Here is the code snippets

 body { background: black; font-family: 'Varela', sans-serif; } .glitch { color: white; font-size: 100px; position: relative; width: 400px; margin: 0 auto; } @keyframes noise-anim { $steps: 20; @for $i from 0 through $steps { # { percentage($i*(1/$steps)) } { clip: rect(random(100)+px, 9999px, random(100)+px, 0); } } } .glitch:after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -1px 0 red; top: 0; color: white; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: noise-anim 2s infinite linear alternate-reverse; } @keyframes noise-anim-2 { $steps: 20; @for $i from 0 through $steps { # { percentage($i*(1/$steps)) } { clip: rect(random(100)+px, 9999px, random(100)+px, 0); } } } .glitch:before { content: attr(data-text); position: absolute; left: -2px; text-shadow: 1px 0 blue; top: 0; color: white; background: black; overflow: hidden; clip: rect(0, 900px, 0, 0); animation: noise-anim-2 3s infinite linear alternate-reverse; } 

 <link href='http://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'> <div class="glitch" data-text="GLITCH">GLITCH</div> 

Answer 2

They use HTML5 Canvas to create this noise animation drawn with Javascript, not CSS, so you won’t be able to handle it by checking it.

Here is a tutorial on creating static / noise textures:

http://code.tutsplus.com/tutorials/how-to-generate-noise-with-canvas--net-16556

And here is the demo:

http://jsfiddle.net/AbdiasSoftware/vX7NK/

I believe this piece of code creates a random static:

 buffer32[i++] = ((255 * Math.random())|0) << 24; 

It might be worth looking at some of the HTML5 Canvas inserts too:

https://www.youtube.com/watch?v=VS1mD9Z0h-Q