A jQuery plugin for adding stylish frosted glass effects over images.

http://dietrich-stein.github.io/vibrancy.js

• jQuery 1.7+
• CamanJS 4.0+
• A modern browser with support for the <canvas> tag

Add script tags to include the jQuery, CamanJS, and this library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/4.0.0/caman.full.min.js"></script>
<script src="jquery.vibrancy-0.1.min.js"></script>

Add HTML with any supported data- attributes on the child elements:

<div class="target">
	<div class="panel panel-1" data-vibrancy-vibrance="100" data-vibrancy-brightness="20" data-vibrancy-blur="100">
		The perfect design is now within your grasp.
	</div>
</div>

Add CSS to control the dimensions and positioning of your target and child elements:

.target {
	width: 800px;
	height: 533px;
}

.panel {
	position: absolute;
	z-index: 9000;
	box-sizing: border-box;
}

.target .panel-1 {
	font-size: 2em;
	color: #000;
	top: 30px;
	left: 30px;
	width: 392px;
	height: 108px;
	padding: 0.5em;
}

Call the plugin with the panelClass set to a CSS class shared by your child elements and the backgroundSrc set to URI reference of your desired background image:

$('.target').vibrancy({
	panelClass: 'panel',
	backgroundSrc: $('.hidden-preload img:first-child').attr('src')
})

• Support for more of the built-in filters provided by CamanJS
• Setting to opt-in to the fading in of the <canvas> element
• Setting to opt-in to caching for memory reduction
• Data attribute to watch resizing on specific panels and re-render
• Render canvas output off-screen and cache it to data URIs for faster rendering
• Support for passing an <img> jQuery object or DOM element as the value of backgroundSrc
• Support for responsive layouts

Check Releases for a detailed changelog.

Built on top of jQuery Boilerplate.

MIT License © Dietrich Stein