Noisy Pneumatic Mnemonic

    jquery-blurr

    0.1.2 • Public • Published

    BLURR

    jQuery Plugin to create nice blur backgrounds from an image. Want to see an example? Have a look here: http://freshnode.co.uk/jquery.blurr/example

    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.

    Install

    npm i jquery-blurr

    DownloadsWeekly Downloads

    7

    Version

    0.1.2

    License

    MIT

    Last publish

    Collaborators

    • lileiseven
    • codeages-admin