スポットライトの効果をWeb上に「Canvas Overlay」
当ページのリンクには広告が含まれています。
スポンサーリンク
スポットライトの効果をWeb上作成できるjQueryプラグイン「Canvas Overlay」
jQueryプラグイン「Canvas Overlay」
「Canvas Overlay」は、html5のcanvasを使ってWebページにスポットライトを当てたような効果を作成できるプラグインです。しかも、ユーザーのマウスと一緒にスポットライトが動いちゃいます。これは、おもしろい！ですね。
スポンサーリンク
スポットライトの効果をお楽しみください。
デモのソース（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>
スポンサーリンク