ノイズエフェクトの作り方 | Fuzz blogHTML, CSS, JavaScriptを使い、当ブログのサイトロゴのようなノイズエフェクトの実装方法を紹介します。 CSS3のアニメーション周りを使えばJavaScript無しでも実装できそうですが、ランダムな動きをつけたり細かい制御をかけたい場合などもあるのでJavaScriptでアニメーションさせてみます。 デモページ ソースの紹介の前に、簡単にまずは原理を。 ノイズさせたい画像の高さ分のHTMLの要素を用意。 （高さ120pxの画像なら120個） 各要素の高さを1pxに指定し、背景画像にノイズさせたい画像を指定。 背景画像位置は各要素1pxずつずらす。 これで見た目は画像そのまま、実態は高さ1pxの要素の集合体となります。 そして、これらの要素にposition: relativeを指定し、アニメーションループ中にleftの値をランダムに動かす。 これでノイズ
