Static/Noise Animation using HTML5 Canvas [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
So I have just explored a whole new bunch of websites at Awwwards. One of them that particularly blew my mind was this. I have just done some basic to intermediate CSS stuff. I was wondering how are these guys getting that noise/disturbance for their fonts ? I am totally clueless. Tried inspecting the code, couldn't understand much.
I know I am not capable of building the whole thing anytime soon, but I love the idea of the noisy background.
How to I go about this? Any pointers would be appreciated :)

Answer 1

Here is Lucas Bebber's Glitch SVG effect.
Here is original and working demo
Here is 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're using HTML5 Canvas to create that noise animation, its drawn with Javascript rather than CSS which is why you wouldn't be able to work it out from inspecting it.
Here's a tutorial on how to create static/noise textures:
http://code.tutsplus.com/tutorials/how-to-generate-noise-with-canvas--net-16556
And here's a demo:
http://jsfiddle.net/AbdiasSoftware/vX7NK/
I believe this part of the code is creating the random static:
buffer32[i++] = ((255 * Math.random())|0) << 24;
Might be worth also watching some intros to HTML5 Canvas too like this:
https://www.youtube.com/watch?v=VS1mD9Z0h-Q