今日の人気記事

  1. ExcelのようにTableが編集できちゃう「Handsontable」
  2. マウスオーバーで画像を拡大「ZoomPic」
  3. 指定した要素をフェイド・スライド「Slide and Fade」 - jQueryプラグイン
  4. 縦・横にスクロールするテレビのようなニューステロップ「TV Credits」
  5. テーブルにページャーを「PaginateMyTable」

スポットライトの効果を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>
スポンサーリンク

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