https://github.com/stdevteam/jquery-blureffect

Blureffect - Lightweight jQuery blur effect plugin with canvas
https://github.com/stdevteam/jquery-blureffect

Last synced: 25 days ago
JSON representation

Blureffect - Lightweight jQuery blur effect plugin with canvas

• Host: GitHub
• URL: https://github.com/stdevteam/jquery-blureffect
• Owner: stdevteam
• License: mit
• Created: 2013-10-14T21:08:42.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2022-04-05T12:59:36.000Z (over 2 years ago)
• Last Synced: 2023-04-05T10:00:45.193Z (over 1 year ago)
• Language: JavaScript
• Size: 671 KB
• Stars: 1
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
jquery-blureffect

=================

Blureffect - Lightweight jQuery blur effect plugin with canvas.

Requirements

==========

jQuery 1.1 and above

The img tag should have an ID attribute

HTML5 doctype ```  ``` (for IE)

Usage

==========

Use jquery.blureffect.js for development (with comments), jquery.blureffect.min.js in production (only 7kb)

```html



```

```javascript

$('#an-id').blureffect({

	radius: 50,//radius of blur effect

	alpha: false,//whether to apply some transparency to the blur effect

	regions: [

		{startX: 10, startY: 10, width: 200, height: 200},

		{startX: 500, startY: 500, width: 100, height: 100}

	],//array of blur region coordinates, one item is [startX, startY, width, height]

	top: '20px',//image and canvas will be absolutely positioned and need top and left in pixels

	left: '20px'//left in pixels

});

```

Demo

==========

For now please check [index.html](index.html) for basic usage and delayed image load examples