🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL


Documentation

jQuery Plugin to create nice blur backgrounds from an image. Want to see an example? Have a look here: https://blurr.k8.cleverthings.io/

Support

  • IE 8/9 (partial)
  • IE 9+ (full)
  • Chrome (desktop/mobile)
  • Firefox
  • Opera
  • Safari (desktop/mobile)

Not supported, yet

  • Safari on Windows

Not tested

  • iPad

Required

  • jQuery (most versions will work)
  • Blurr
  • A web page
  • Some divs

Example inclusion

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="jquery.blurr.js"></script> 

How to install

First, make sure jQuery is included on the page above the inclusion of jquery.blurr.js. Then, grab yourself an image. Any size will do (TM).

Create a div, like so:

<div class="blur-this" data-href="example-image.jpg"><div>Text content inside the blur</div></div> 

Note, you'll need that div inside the Blurr div. This is used by the plugin to ensure the text you enter is visible above the blurred graphic.

Now, initialise the plugin:

$(document).ready(function() {     $('.blur-this').blurr({         height: 300, // Height, in pixels of this blurred div.         sharpness: 40, // Sharpness, as a number between 0-100. 100 is very sharp, 0 is extremely blurry         offsetX: 0, // The x (left - right) offset of the image         offsetY: 0, // The y (top - bottom) offset of the image         callback: null // Callback to be called after the blur has been rendered. Recieves the following arguments (href, offsetX, offsetY, sharpness)     }); }); 

And sit back to watch the glory unfold.

Example

An example is available in the root of this repository in the index.html page.


You May Also Like