iOS Style Frosted Glass Effect with jQuery and Canvas - vibrancy.js

vibrancy.js is a jQuery plugin used to implement iOS style 'Frosted Glass' blur effect on your images using Html5 canvas element. Helpful to display your image captions in a stylish way.

See also:

• jQuery Plugin For Animated Image Caption with Blurred Overlay - Captionblur
• Create iOS 7 Style Blur Effect with jQuery oblurlay Plugin

How to use it:

1. Load the vibrancy.js script after you have jQuery library loaded.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="src/jquery.vibrancy.js"></script>

2. Load the required CamanJS for manipulating images using the HTML5 canvas and Javascript.

<script src="//cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>

3. The Html to create blurred caption over your images using Html5 data-* attributes.

• data-vibrancy-vibrance: Determines the degree to which desaturated colors are made saturated.
• data-vibrancy-brightness: Determines the degree to which the brightness is increased.
• data-vibrancy-blur: Determines the intensity of the blur effect;

<div class="demo">
  <div class="panel panel-1" 
    data-vibrancy-vibrance="100" 
    data-vibrancy-brightness="20" 
    data-vibrancy-blur="100"
  >
    Blurred caption
  </div>
</div>

4. Enable the plugin and set the image src in the javascript.

$(function() {
$('.demo').vibrancy({
  panelClass: 'panel',
  backgroundSrc: '1.jpg'
});
});

---

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