Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sodhanalibrary/jqimgblureffects
jQuery Plugin For SVG Blur Effects On Image
https://github.com/sodhanalibrary/jqimgblureffects
Last synced: 12 days ago
JSON representation
jQuery Plugin For SVG Blur Effects On Image
- Host: GitHub
- URL: https://github.com/sodhanalibrary/jqimgblureffects
- Owner: SodhanaLibrary
- License: gpl-3.0
- Created: 2016-05-01T10:13:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-31T11:25:38.000Z (3 months ago)
- Last Synced: 2024-11-14T17:22:56.669Z (2 months ago)
- Language: HTML
- Size: 53.7 KB
- Stars: 53
- Watchers: 7
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jqImgBlurEffects
jQuery Plugin For SVG Blur Effects On Image
### Implementation
This plugin was created on the concept un-blurring a part of image using SVG. Read [this article] (http://blog.ftmocks.com/2016/04/unblur-part-of-image-using-svg.html) for detailed expanation
### Quick Demo
[Click here] (http://demo.ftmocks.com/jqImgBlurEffects/demo_introduction.html) to see demo. You will understand, what you can do with this plugin
###Import jQuery
```js
```
###Import jqImgBlurEffects JS & CSS
```js
```
###HTML markup
```html
```
###JS Code
Observe below syntax. You will get better idea after seeing examples
```js
var myOptns = {
stdDeviation:,
brightness : ,
sintros:{
intromode:,
delay:,
transitionDelay:,
srectangles:,
scircles:,
sellipses:,
spaths:,
spolygons:,
stexts:
},
srectangles:,
scircles:,
sellipses:,
spaths:,
spolygons:,
stexts:,
smouseover : {
circle : ,
ellipse : ,
rectangle :
},
sclick : {
circle : ,
ellipse : ,
rectangle :
}
};
$(".myImg").jqImgBlur(myOptns);
```
##Un-Blur In A Shape
This plugin supports svg shapes - circle, ellipse, polygon, path , rectangle. Read [this article](http://blog.ftmocks.com/2016/05/jqimgblureffects-unblur-part-of-image_1.html) for detailed explanation
###Examples
1. Circle - [DEMO] (http://demo.ftmocks.com/jqImgBlurEffects/demo_circle.html)
2. Ellipse - [DEMO] (http://demo.ftmocks.com/jqImgBlurEffects/demo_ellipse.html)
3. Rectangle - [DEMO] (http://demo.ftmocks.com/jqImgBlurEffects/demo_rect.html)
4. Path - [DEMO] (http://demo.ftmocks.com/jqImgBlurEffects/demo_path.html)
5. Polygon - [DEMO] (http://demo.ftmocks.com/jqImgBlurEffects/demo_polygon.html)
##Un-Blur On Mouse Over
This plugin supports svg shapes - circle, ellipse, rectangle for mouse-over functionaliy. Read [this article](http://blog.ftmocks.com/2016/05/jqimgblureffects-unblur-part-of-image.html) for detailed explanation
###Examples
1. Circle - [DEMO] (http://demo.ftmocks.com/jqImgBlurEffects/demo_circle_mouseover.html)
2. Ellipse - [DEMO] (http://demo.ftmocks.com/jqImgBlurEffects/demo_ellipse_mouseover.html)
3. Rectangle - [DEMO] (http://demo.ftmocks.com/jqImgBlurEffects/demo_rect_mouseover.html)
##Un-Blur On Click
This plugin supports svg shapes - circle, ellipse, rectangle for click functionaliy. Read [this article](http://blog.ftmocks.com/2016/05/jqimgblureffects-unblur-part-of-image.html) for detailed explanation
###Examples
1. Circle - [DEMO] (http://demo.ftmocks.com/jqImgBlurEffects/demo_circle_click.html)
2. Ellipse - [DEMO] (http://demo.ftmocks.com/jqImgBlurEffects/demo_ellipse_click.html)
3. Rectangle - [DEMO] (http://demo.ftmocks.com/jqImgBlurEffects/demo_rect_click.html)
##Introduction To Parts Of Image
This plugin supports svg shapes - circle, ellipse, rectangle for this functionaliy. Read [this article](http://blog.ftmocks.com/2016/05/jqimgblureffects-step-by-step.html) for detailed explanation
###Examples
1. Circle - [DEMO] (http://demo.ftmocks.com/jqImgBlurEffects/demo_introduction.html)