製作 noise effect 效果

方法、工具:
這支影片有快速簡單教學，裡面使用 photoshop 來做噪點。
但我使用這個噪點生成器，可以調整噪點透明度、噪點密度、噪點顏色、背景色或背景透明，再設定輸出的圖片大小(寬高皆440px 就有不錯效果了)。

step 1 : 生成噪點圖片

step 2 : 靜態直接使用圖片
實作是使用 React + Tailwind CSS，因為是測試做背景的噪點效果，所以用 background image

<div className="h-[100px] w-[300px]">
  <div className="animate-noiseEffect z-40 h-full w-full bg-[url('/src/assets/images/img-noise-blue.png')] bg-cover bg-center outline"></div>
</div>

step 3 : 動態加上 animation

//tailwind.config.js
export default {
    theme: {
      extend: {
        keyframes : {
            noiseEffect : {
              "0%" : {backgroundPosition: "0 0"},
              "100%" : {backgroundPosition: "100% 100%"}
            }
        },
        animation: {
          noiseEffect: "noiseEffect 1s steps(10) infinite"
        }
      },
    },
    plugins: [],
}