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

iOS Style Frosted Glass Effect with jQuery and Canvas - vibrancy.js
File Size: 114 KB
Views Total: 6478
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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:

How to use it:

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

<script src="//"></script>
<script src="src/jquery.vibrancy.js"></script>

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

<script src="//"></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" 
    Blurred caption

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

$(function() {
  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.