CSS3 Powered Image Effect JavaScript Library – Effect.js

Preview:

Description:

Effect.js is a small JavaScript library that applies CSS/CSS3 based effects (image filters such as opacity, radius, rotate, scale, blur, greyscale, sepia) to any DOM objects.

Install it via NPM:

$ npm install effect-js

How to use it:

Place the core JavaScript library effect.js into your html page.

<script src="effect.js"></script>

Select a DOM element:

var dom = Effect('#demo');

Apply the following effects to the DOM element:

dom.opacity(0.7);
dom.radius(30);
dom.rotate(30);
dom.scale(0.7);
dom.blur(0.9);
dom.grayscale(1);
dom.sepia(1);

Set the animation duration in seconds.

var dom = Effect('#demo', {
    duration: 1
});