アニメーション

CSSやJSで作る、窓ガラスの雨粒が流れるイマーシブ背景エフェクト

投稿日2026/06/08

更新日2026/6/6

雨の日に窓ガラス越しに外を眺めるような、静かで没入感のある雰囲気をWebサイトで再現するエフェクトです。

霧がかった森の写真をCSSで暗くぼかして背景に敷き、その上にCanvasで描画されるリアルな雨粒をmix-blend-mode: screenで重ねています。

雨粒の描画にはRaindropsライブラリを使用しており、水滴が流れ落ちる様子や光の屈折を自然に表現します。

ヒーローセクションやローディング画面、雰囲気重視のランディングページなどに活用できます。

目次

  1. コード
  2. 詳しい説明
  3. 関連記事

Code コード 

<img id="custom-bg" src="https://images.unsplash.com/photo-1448375240586-882707db888b?w=1920&q=80" alt="Misty forest background">
<canvas id="bg-canvas" aria-hidden="true"></canvas>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
}
/* 背景画像 - 霧の深い森のフリー素材 */
#custom-bg {
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%) scale(1.05);
	z-index: 0;
	object-fit: cover;
	/* 暗めのフィルターで雨を際立たせる */
	filter: blur(4px) brightness(0.45);
	will-change: filter;
}
/* 雨のエフェクトキャンバス */
#bg-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	mix-blend-mode: screen;
	opacity: 0.95;
	pointer-events: none;
}
const canvas = document.getElementById("bg-canvas");
    const customBg = document.getElementById("custom-bg");

    // 雨のエフェクト初期化
    function initRaindrops() {
      if (typeof Raindrops === "undefined") return;
      
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      
      try {
        new Raindrops(canvas, canvas.width, canvas.height, {
          fg: customBg,
          bg: customBg,
          rainChance: 0.4,
          brightness: 1.1,
          renderDropsOnTop: true
        });
      } catch(e) {
        console.error("Rain effect failed:", e);
      }
    }

    // 外部スクリプトのロード
    function loadRainScript() {
      const script = document.createElement("script");
      script.src = "https://fyildiz1974.github.io/web/files/raindrops.js";
      script.onload = () => {
        if (customBg.complete) {
          initRaindrops();
        } else {
          customBg.onload = initRaindrops;
        }
      };
      document.head.appendChild(script);
    }

    // 開始
    document.addEventListener("DOMContentLoaded", () => {
      loadRainScript();

      window.addEventListener("resize", () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      });
    });

Explanation 詳しい説明

仕様

このエフェクトは、背景画像レイヤーと雨粒エフェクトレイヤーの2層構成で成り立っています。

主な機能は以下のとおりです。

  • 背景画像の演出: <img>要素をCSSのposition: fixedで画面全体に敷き、filter: blur(4px) brightness(0.45)で暗くぼかすことで、奥行き感と雨が際立つ下地を作ります。object-fit: cover相当の配置で、画面サイズに関わらず画像が隙間なく表示されます。
  • 雨粒エフェクト: Canvasにリアルな雨粒を描画するRaindropsライブラリを使用しています。水滴が生まれ、流れ落ち、合体する様子を自然に表現します。
  • ブレンド合成: Canvasにmix-blend-mode: screenを設定し、雨粒が背景画像と自然に馴染むよう合成しています。
  • レスポンシブ対応: リサイズ時にCanvasのサイズを更新します。背景画像はmin-width: 100%・min-height: 100%＋transform: translate(-50%, -50%)で、あらゆる画面比率に対応します。
  • 非同期読み込み: Raindropsスクリプトを動的に読み込み、背景画像の読み込み完了後にエフェクトを初期化する順序制御を行っています。

カスタマイズ

  • 背景画像の変更: <img id="custom-bg">のsrc属性を差し替えるだけで、任意の画像に変更できます。街並み、海、山など、雰囲気に合わせた画像を設定してください。
  • ブラーの強さ: CSSのfilter: blur(4px)の値を変えると、背景のぼかし具合を調整できます。値を大きくするとより幻想的に、小さくするとシャープになります。
  • 明るさ: brightness(0.45)の値を変更すると、背景の暗さを調整できます。1.0で元の明るさ、値を小さくするほど暗くなります。
  • 雨の量: rainChance（デフォルト0.4）の値を大きくすると雨粒が増え、小さくすると少なくなります。
  • エフェクトの透明度: CSSのopacity: 0.95を調整すると、雨粒レイヤー全体の透明度が変わります。
  • スケール: 背景画像のtransformにあるscale(1.05)を変更すると、ブラー時の端の隙間を調整できます。
  • ブレンドモード: mix-blend-modeをscreenからoverlayやsoft-lightに変えると、合成の雰囲気が変わります。

注意点

  • 外部ライブラリの依存: 雨粒エフェクトはGitHub Pages上でホストされているRaindropsライブラリ（fyildiz1974.github.io）に依存しています。本番環境ではライブラリをローカルにホスティングすることを推奨します。外部URLが利用できなくなった場合、雨粒エフェクトは表示されません。
  • 画像のCORS: Unsplashから画像を読み込んでいます。Raindropsライブラリは背景画像をfg・bgとしてCanvas内で使用するため、CORS対応が必要です。CORS非対応のサーバーの画像ではエフェクトが正しく動作しない場合があります。
  • WebGL依存の可能性: Raindropsライブラリは内部でWebGLを使用する場合があります。WebGLに対応していないブラウザや端末ではエフェクトが表示されない可能性があります。
  • パフォーマンス: Canvasへの毎フレーム描画に加え、CSSのblurフィルターとwill-change: filterによるGPU負荷がかかります。低スペック端末では動作が重くなる場合があります。
  • リサイズ時の制約: リサイズ時にCanvasサイズは更新されますが、Raindropsインスタンスの再初期化は行っていません。大幅なリサイズでは雨粒の描画範囲がずれる場合があります。
  • アクセシビリティ: Canvasにaria-hidden="true"が設定されているため、スクリーンリーダーからは雨粒エフェクトが読み上げられることはありません。背景画像にはalt属性が設定されています。
  • ユーザー操作なし: pointer-events: noneが設定されているため、雨粒への直接的なインタラクションはありません。純粋な視覚演出として機能します。

Related 関連記事