今日の人気記事

  1. レスポンシブなメニューを作成「MeanMenu」
  2. ページ内スクロールにアニメ効果を「AnimateScroll」
  3. 数値のカウントアップ - さまざまなフォーマットに対応「Counter-Up」

スポットライトの効果をWeb上に「Canvas Overlay」

当ページのリンクには広告が含まれています。

スポンサーリンク

スポットライトの効果をWeb上作成できるjQueryプラグイン「Canvas Overlay」

jQueryプラグイン「Canvas Overlay」

「Canvas Overlay」は、html5のcanvasを使ってWebページにスポットライトを当てたような効果を作成できるプラグインです。しかも、ユーザーのマウスと一緒にスポットライトが動いちゃいます。これは、おもしろい!ですね。

スポンサーリンク

スポットライトの効果をお楽しみください。

「Canvas Overlay」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Canvas Overlay - jQueryプラグインまとめのカルマ</title>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script src="canvasoverlay.js"></script>
<script>
jQuery(function($) {
  $('#overlay-canvas').CanvasOverlay({shadow:50,radius:500});
});
</script>
</head>
<body>
<canvas id="overlay-canvas"></canvas>
<div class="contents">
<img src="image.jpg" alt="picture">
</div>
<style>
.contents {
  float: right;
}
.cw-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
}
</style>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)