画像のカラーが外側にしみ出す効果、アンビエント効果を実装する - CSS

画像のカラーが外側にしみ出す効果、アンビエント効果を実装するコードを紹介します。

概要

コンテンツの画像や動画の色が周辺にしみ出す効果(アンビエント効果)を実装します。

実装方針

画像や動画の枠の背後にHTML Canvasを配置し、画像をHTML Canvasに描画し、HTML Canvasにぼかし効果を入れることで、アンビエント効果を表現します。
ぼかし効果はCSSのfilter: blurで表現します。

例

コード

以下のHTMLファイルとCSSファイルを作成します。

SimpleAmbient.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="SimpleAmbient.css" />
  <script>
    var canvasContext;
    var imageElem;

    function onLoad() {
      imageElem = document.getElementById("image");

      var canvasElem = document.getElementById("canvas");
      canvasContext = canvasElem.getContext("2d");
      /*setInterval(getCurrentImage, 100);*/ /* 動画の場合 */
      getCurrentImage();
    }

    function getCurrentImage() {
      canvasContext.drawImage(imageElem, 0, 0, canvas.width, canvas.height);
    }

  </script>
</head>
<body onload="onLoad();">
  <h2>Ambientのデモ</h2>
  <div class="BackGroundFrame">
    <canvas id="canvas"></canvas>
    <img id="image" class="ImageFrame" src="image.jpg"/>
  </div>
</body>
</html>

SimpleAmbient.css

.BackGroundFrame {
  background-color: #282828;
  height:480px;
  position: relative;
}

.ImageFrame {
  width: 480px;
  height: 270px;
  background-color: #b6ff00;
  z-index: 2;
  position: absolute;
  top: 8rem;
  left: 8rem;
}

#canvas {
  width: 400px;
  height: 270px;
  z-index: 1;
  border-radius: 10px;
  position: absolute;
  top: 8rem;
  left: 8rem;
  filter: blur(30px);
  opacity: 0.5;
}

解説

ページ表示時に以下のJavaScriptが実行されます。コンテンツの画像のエレメントと、HTML Canvasのコンテキストを取得します。
getCurrnetImage関数を呼び出します。

    function onLoad() {
      imageElem = document.getElementById("image");
      var canvasElem = document.getElementById("canvas");
      canvasContext = canvasElem.getContext("2d");
      /*setInterval(getCurrentImage, 100);*/ /* 動画の場合 */
      getCurrentImage();
    }

getCurrnetImage関数では、キャンバスにimgタグの画像を描画しています。

    function getCurrentImage() {
      canvasContext.drawImage(imageElem, 0, 0, canvas.width, canvas.height);
    }

一番外側の枠は position:relativeを指定しており、内部のposition: absoluteが外側のタグの相対座標となるように設定します。

.BackGroundFrame {
  background-color: #282828;
  height:480px;
  position: relative;
}

内側の画像とHTMLキャンバスは absoluteを指定しています。外側のBackGroundFrame枠に対して相対座標で表現できます。

.ImageFrame {
  width: 480px;
  height: 270px;
  z-index: 2;
  position: absolute;
  top: 8rem;
  left: 8rem;
}

HTML Canvasはimgの枠と同じサイズ、同じ位置を指定し、画像と重なる位置に配置します。

#canvas {
  width: 400px;
  height: 270px;
  z-index: 1;
  border-radius: 10px;
  position: absolute;
  top: 8rem;
  left: 8rem;
  filter: blur(30px);
  opacity: 0.5;
}