glitchy glitch glitch
JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
build
css
images
js
.gitignore
.jshintrc
404.jade
Gruntfile.js
README.md
index.jade
layout.jade
package.json

README.md

Glitch

A simple JS library to transition images through canvas filters.

var arrayOfImages = ['/images/imageOne.jpg', '/images/imageTwo.jpg'];
var options = {
    filters: ['scanlines', 'glitch', 'brightness'],
    animationLength: 800,
    animationFrames: 10,
    filterCount: 5,
    filterOptions: {
      scale: {
        w: 800, h: 400
      },
      filters: {
        threshold: {
          amount: 99
        },
        brightness: {
          adjustment: 25
        }
      }
    },
    delay: 20000
};
var glitch = new ImageLoader('.myClass', arrayOfImages, options);

Available Filters

  • unfiltered
  • grayscale
  • brightness
  • threshold
  • noise
  • redNoise
  • red
  • glitch
  • blur

coming soon

  • pixelate
  • scanlines
  • and much more...

To Do's

  • break filters into standalone files
  • fix pixelate and scanlines
  • refactor image import