所以我刚刚在Awwwards探索了一堆全新的网站。其中特别让我大吃一惊的是这个。我刚刚做了一些从基本到中级CSS的东西。我想知道这些家伙是如何为他们的字体获得噪音/干扰的?我完全无能为力。尝试检查代码,听不懂太多。
我知道我无法很快构建整个东西,但我喜欢嘈杂背景的想法。
我该怎么做?任何指示将不胜感激:)
这是Lucas Bebber的Glitch SVG效果。
这是original and working demo
这是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>
他们使用HTML5 Canvas来创建噪音动画,它是用Javascript而不是CSS绘制的,这就是为什么你不能通过检查它来解决这个问题。
以下是有关如何创建静态/噪点纹理的教程:
http://code.tutsplus.com/tutorials/how-to-generate-noise-with-canvas--net-16556
这是一个演示:
http://jsfiddle.net/AbdiasSoftware/vX7NK/
我相信这部分代码正在创建随机静态:
buffer32[i++] = ((255 * Math.random())|0) << 24;
可能也值得一看HTML5 Canvas的一些介绍,如下所示:
https://www.youtube.com/watch?v=VS1mD9Z0h-Q