Grain Noise Overlay

DEMO

<div class="demo-stage gno-stage">
  <div class="gno-noise" aria-hidden="true"></div>
  <div class="gno-inner">
    <p class="gno-eyebrow">TEXTURE</p>
    <h3 class="gno-head">GRAIN NOISE</h3>
    <p class="gno-lead">画像ファイルなしで粒状の質感を足せます。</p>
  </div>
</div>

.gno-stage { position:relative; display:flex; align-items:center; justify-content:center; padding:3rem 1.5rem; min-height:280px; overflow:hidden;
  background:linear-gradient(135deg,#E91B89 0%,#7B37A8 48%,#5BAADE 100%); }
.gno-noise {
  position:absolute; inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.34; mix-blend-mode:overlay; pointer-events:none;
  animation: gno-shift .7s steps(3) infinite;
}
@keyframes gno-shift {
  0%   { transform:translate(0,0); }
  33%  { transform:translate(-2%,1.5%); }
  66%  { transform:translate(1.5%,-1%); }
  100% { transform:translate(0,0); }
}
.gno-inner { position:relative; z-index:1; text-align:center; color:#fff; }
.gno-eyebrow { font-family:'Oswald',sans-serif; font-size:.68rem; letter-spacing:.34em; opacity:.85; margin-bottom:.7rem; }
.gno-head { font-family:'Oswald',sans-serif; font-size:clamp(1.6rem,7vw,2.6rem); letter-spacing:.12em; margin-bottom:.7rem; }
.gno-lead { font-size:.84rem; line-height:1.8; opacity:.9; }
@media (prefers-reduced-motion: reduce) {
  .gno-noise { animation:none; }
}

AI PROMPT

グラデーション背景にフィルムグレインの質感を重ねるノイズオーバーレイを作って。ノイズ画像は用意せず、SVGフィルタをdata URIで埋め込む。中身は <filter><feTurbulence type="fractalNoise" baseFrequency="0.82" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter> を適用した rect で、これをCSSの background-image: url("data:image/svg+xml,...") として使う（# は %23 に、" は ' に置き換えてエスケープすること）。オーバーレイ用の要素を position: absolute; inset: 0 で敷き、opacity: .3 前後、mix-blend-mode: overlay、pointer-events: none を指定する。粒を動かして本物のフィルムらしくするには、要素を inset: -50% と大きめに取り、@keyframes で数%だけ transform: translate() を動かす。イージングは steps(3) にすると連続的に滑らず、コマ送りのざらつきになる。baseFrequency を上げると粒が細かく、下げると粗くなる。用途は、のっぺりしたグラデーション背景・ヒーロー・カードの質感付けで、バナーの安っぽさを消すのに効く。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。