画面全体に薄いノイズのようなものを発生させる方法が知りたい。

ざっくりとした質問で大変恐縮なのですが、以下のサイトのように、画面全体に薄いノイズのようなものを発生させる方法を教えていただけないでしょうか？?

https://you.digitalwerk.agency/

CSS、JSなどを使ったグリッチエフェクト、ノイズアニメーションのコードは検索でヒットしたのですが、上のサイトとはちょっと表現のニュアンスが違ったため、質問させていただきました。もしよろしければ、実装方法などに関して、参考になる記事などあれば教えていただけますと大変助かりますm m

漠然とした質問で大変恐縮なのですが、ご回答いただけますと幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

挙げられたサイトがどういう実装でノイズアニメーションを実現しているのか？ということでしたら、「ノイズ用の画像を用意して、それを無限に上下左右にアニメーションさせている」になります。

html
1<div class="noise"></div>

css
1.noise::after {
2  animation: noise 8s steps(10) infinite;
3  background: url("ノイズ用の画像");
4  content: "";
5  display: block;
6  height: 300%;
7  left: -100%;
8  position: absolute;
9  top: -100%;
10  width: 300%;
11  z-index: 2;
12}
13
14@keyframes noise {
15  to {
16    background-position: 0 0;
17  }
18  10% {
19    background-position: -5% -10%;
20  }
21  20% {
22    background-position: -15% 5%;
23  }
24  30% {
25    background-position: 7% -25%;
26  }
27  40% {
28    background-position: 20% 25%;
29  }
30  50% {
31    background-position: -25% 10%;
32  }
33  60% {
34    background-position: 15% 5%;
35  }
36  70% {
37    background-position: 0 15%;
38  }
39  80% {
40    background-position: 25% 35%;
41  }
42  90% {
43    background-position: -10% 10%;
44  }
45}