Statische/Noise-Animation mit HTML5 Canvas

Question

Also ich habe gerade eine ganze Reihe von Websites unter Awwwards erforscht. Einer von denen, die mir besonders in den Sinn kamen, war this. Ich habe gerade einige grundlegende CSS-Sachen gemacht. Ich habe mich gefragt, wie diese Jungs diese Geräusche/Störungen für ihre Schriften bekommen? Ich bin total ahnungslos. Versuchte, den Code zu überprüfen, konnte nicht viel verstehen.

Ich weiß, dass ich nicht in der Lage bin, die ganze Sache bald zu bauen, aber ich liebe die Idee des lauten Hintergrunds.

Wie gehe ich darüber? Irgendwelche Zeiger würden geschätzt werden :)

Answer 1

Hier ist Lucas Bebbers Glitch SVG.

Hier ist original and working demo

Hier ist 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

Sie benutzen HTML5 Leinwand, um diese Geräuschanimation zu verursachen, sein gezeichnet mit Javascript eher als CSS, weshalb Sie nicht in der Lage sein würden, es heraus von der Kontrolle es zu erarbeiten.

Hier ist eine Anleitung, wie man statisch/Lärm Texturen erzeugen:

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

Und hier ist ein Demo:

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

Ich glaube, dieser Teil des Codes den Zufall schafft statisch:

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

Könnte sich lohnen, auch einige Intros zu HTML5 Canvas auch wie diese hier:

Wirkung

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