Animacja statyczna/szumowa za pomocą HTML5 Canvas

Tak więc właśnie odkryłem całą masę nowych stron internetowych pod numerem Awwwards. Jedną z nich, która szczególnie mi umknęła, była this. Właśnie zrobiłem kilka podstawowych i pośrednich rzeczy CSS. Zastanawiałem się, jak ci faceci dostają ten hałas/zakłócenia dla swoich czcionek? Jestem całkowicie nieświadomy. Próbowałem sprawdzić kod, nie mogłem zrozumieć wiele.Animacja statyczna/szumowa za pomocą HTML5 Canvas

Wiem, że nie jestem w stanie zbudować tego wszystkiego w najbliższym czasie, ale uwielbiam pomysł hałaśliwego tła.

Jak to zrobić? Wszelkie wskazówki byłyby mile widziane :)

Źródło

2014-12-05 Deepankar Bajpeyi

oni używają płótna :) –

płótna: D http://www.w3schools.com/html/html5_canvas .asp Kilka informacji o płótnie! – Stefan

Jest to głównie robione z JS, CSS odgrywa dość minimalną rolę w tym. –

Oto efekt Lucas Bebber za Glitch SVG.

Oto original and working demo

Oto 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>

Źródło

2014-12-05 09:31:48 ummahusla

WOW. To więcej niż to, czego potrzebuję. Dziękuję. Potrzebowałem tylko kierunku. To zabawne, jak ludzie atakują cię w dół głosowania. Czy nie rozumiem jakiejś polityki wspólnotowej? Czułem, że to pytanie leży we właściwym interesie. –

niektórzy twórcy są po prostu zrzędni, domyślam się, – Pixelomo

@DeepankarBajpeyi Myślę, że to dlatego, że odpowiedź nie jest związana z pytaniem. Tak jak ja, znalazłem tę stronę mając nadzieję, że dostanę to, czego potrzebuję (Tworzenie szumu z płótnem HTML5), ale zaakceptowana odpowiedź używa zamiast tego ścieżki klipu CSS. :) –

Używają płótna HTML5 do stworzenia tej animacji szumu, jej narysowanej JavaScriptem, a nie CSS, dlatego nie będziesz w stanie wyleczyć go z inspekcji.

Oto poradnik na temat tworzenia tekstur static/szumu:

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

A oto demo:

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

Wierzę, że ta część kodu tworzy losowy static:

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

Może warto też oglądać niektóre intra do HTML5 Canvas też tak:

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

Źródło

2014-12-05 09:28:52 Pixelomo

Animacja statyczna/szumowa za pomocą HTML5 Canvas

Odpowiedz

Powiązane problemy