使用HTML5 Canvas的静态/噪声动画 [英] Static/Noise Animation using HTML5 Canvas

问题描述

因此，我刚刚在 Awwwards 探索了一大批新网站。其中一个特别引起我的注意的是这。我刚刚做了一些基本的中间CSS东西。我想知道这些家伙如何得到噪音/干扰他们的字体？我完全无能为力。尝试检查代码，很难理解。

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.

我该如何解决？

推荐答案

这里是Lucas Bebber的Glitch SVG效果。

Here is Lucas Bebber's Glitch SVG effect.

这里是 原创和工作演示

这是代码段

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>

这篇关于使用HTML5 Canvas的静态/噪声动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！