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

Category: Javascript , Recommended | September 23, 2018
Author: JustClear
Views Total: 892 views
Official Page: Go to website
Last Update: September 23, 2018
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'
});

Changelog:

09/23/2018

  • Refactor

You Might Be Interested In:


Leave a Reply