0.2.2 • Published 7 years ago
effect-js v0.2.2
Effect.js
Javascript DOM Effect Library (CSS3)
- Website: https://daegwang.github.io/lab/effect.js/
- Github: Effect.js
Installation
Download effect.js
```html <script type="text/javascript" src="js/effect.js"></script> ```
Install with npm
``` $npm install effect-js ```
How to use
Select DOM
var dom = Effect('#sample');
Set Image Url (optional)
var imgUrl = 'https://daegwang.github.io/lab/effect.js/img/sample.jpg';
dom.setImg(imgUrl); //Change or Set Image Url
After call this Method, IMG
tag is Generated in your Selected DOM
. If Selected DOM
's TagName is IMG
, src value is changed to parameter of setImg.
Give Effect
Opacity
dom.opacity(0.7);
Radius (border-radius)
dom.radius(30);
Rotate (deg)
dom.rotate(30);
Scale
dom.scale(0.7);
Blur (px)
dom.blur(0.9);
GrayScale
dom.grayscale(1);
Sepia
dom.sepia(1);
Duration (s)
//Option 1: set Duration at First (default 0)
var dom = Effect('#sample', {
duration: 1
});
//Option 2: change Duration
dom.setDuration(2);
Overlay Effect
Scale + Rotate
dom.scale(0.6).rotate(15);
dom.rotate(15).rotate(15); //same as dom.rotate(30);
Optional: Select DOM (using jQuery)
var dom = Effect($('#sample'));
Example
Browser Support
- Chrome: 26.0, 4.0 -webkit-
- Safari: 6.1, 3.1 -webkit-
- Edge: 10.0
- Firefox: 16.0, 4.0 -moz-
License
Released under MIT License