img-glitch

1.0.1 • Public • Published

imgGlitch

Create an image glitch effect like this one: http://codepen.io/Maximilianos/pen/mergqg?editors=001

Based on a pen by @lucasbebber.

This module is the code from Luca's pen without the jQuery dependency and wrapped in a reusable ES2015 module.

Install

Via npm

npm i img-glitch

Usage

The Html: A base 64 encoded image:

<img src="data:image/jpg;base64,/9j/4QAYRXhpZgA ... ... h/sUH//2Q=="/>

The JS:

import imgGlitch from 'img-glitch';
 
const glitch = imgGlitch('img', {
    maxErrors: 700,
    margin: 2200,
    limiter: 0.7
});
 
// start the glitching!
glitch.start();
 
// stop/pause the glitching
glitch.stop();
 
// clear the glitching effects, 
// it's like it never happened!
glitch.clear();

Demo on codepen

License

MIT

Package Sidebar

Install

npm i img-glitch

Weekly Downloads

11

Version

1.0.1

License

MIT

Last publish

Collaborators

  • maximilianos