Effect.js

Javascript DOM Effect Library (CSS3)

• Website: https://daegwang.github.io/lab/effect.js/
• Github: Effect.js

Installation

• Download effect.js

  <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

• https://daegwang.github.io/lab/effect.js/

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