A JS Library For Blur Effect On Images – blurify.js

Category: Javascript , Recommended | March 17, 2017
Author: JustClear
Views Total: 373
Official Page: Go to website
Last Update: March 17, 2017
License: MIT

Preview:

A JS Library For Blur Effect On Images – blurify.js

Description:

blurify.js is a lightweight JavaScript library that gives you the ability to apply a blur effect on any images using either canvas or CSS filters (if supported).

Install it via package managers:

# Yarn
yarn add blurify

# NPM
$ npm install blurify

# Bower
$ bower install blurify

How to use it:

Load the JavaScript file blurify.js in the document when needed.

<script src="blurify.js"></script>

Apply a default blur effect to your image.

new blurify({
  images: document.querySelectorAll('.blurify')
});

Config the blur effect. A larger value will create more blur.

new blurify({
  images: document.querySelectorAll('.blurify'),
  blur: 6
});

Set the blur mode:

new blurify({
  images: document.querySelectorAll('.blurify'),
  mode: 'auto', // or 'canvas', 'css'
});