jQuery Plugin For HTML5 Canvas Overlay Effects - Canvas Overlay

File Size: 23.8 MB
Views Total: 1826
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For HTML5 Canvas Overlay Effects - Canvas Overlay

jQuery Canvas Overlay is a jQuery plugin that allows HTML5 canvas overlays with cutout at the current cursor position.  With this plugin you can create quite impressive effects with ease on any website. Let people search around on your page and interact only with parts of the website they're actually able to see. Hover the page and click on elements to see the plugin in action.

How to use it:

1. Create a HTML5 canvas overlay

<canvas id="overlay" width="400" height="400"></canvas>

2. Include jQuery library and jQuery Canvas Overlay plugin on the page

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="assets/js/jquery.canvasOverlay.js"></script>

3. Call the plugin with options

<script>
jQuery(function($) {
$('#overlay-canvas').CanvasOverlay({
shadow:50, // This defines the size of the shadow around the cutout.
radius:500 // This defines the size / radius of the cutout itself.
});
});
</script>

Change log:

v0.2.0 (2013-07-08)

  • Enhanced blending mode and ability to add images as background and cutout.

This awesome jQuery plugin is developed by Bahlor. For more Advanced Usages, please check the demo page or visit the official website.