Skip to content
jQuery Plugin to create nice blur backgrounds from an image
JavaScript HTML
Branch: master
Clone or download
Latest commit 21368e2 Jul 31, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Typo - updated to version 0.1.2 Aug 3, 2014
example Fixed example Aug 1, 2014
src Typo - updated to version 0.1.2 Aug 3, 2014
.gitignore Ignore... gitignore?? Aug 1, 2014
MIT-LICENCE.txt Added licence and jQuery plugin manifest Aug 1, 2014
README.md
blurr.jquery.json Typo - updated to version 0.1.2 Aug 3, 2014

README.md

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 can’t perform that action at this time.