README
Pixer
Automatically generate pixelated gradient between two block elements. Written in Typescript.
Getting started
Download this plugin from the Github repository or install it through this command:
$ npm install pixer --save
This library is also available through Bower package manager:
$ bower install pixer --save
Required assets
Set some CSS rules for the canvas elements we are going to use. These are some suggested classes:
.js-pixer {
width: 100%;
height: 80px;
}
.js-pixer--big {
width: 100%;
height: 120px;
}
.js-pixer--small {
width: 100%;
height: 40px;
}
Import the Pixer library:
<script src="path/to/dist/pixer.js"></script>
Required markup
Just put a canvas element having the data-pixer attribute in between the two block elements you want to apply the pixelated border to. It's mandatory to set a CSS property for the background of the two target elements:
<!-- target 1 -->
<div style="background:<COLOR>"></div>
<!-- the pixelated gradient border will be generated inside this canvas -->
<canvas data-pixer class="js-pixer"></canvas>
<!-- target 2 -->
<div style="background:<ANOTHER COLOR>"></div>
Start it up
This Javascript library is UMD compliant, so you can consume it even like this:
var pixer = require('pixer');
// Call the init function which returns the API object handler
var pixerApi = pixer();
Or just get the global object bound to the window:
var pixer = window.pixer;
// Call the init function which returns the API object handler
var pixerApi = pixer();
Set some options
At the moment the only customizable setting is the number of stripes that the pixelated border will be formed of. The default amount of stripes is 4.
You can set the custom amount of stripes by passing a valid JSON object into the data-pixer attribute:
<div id="target-1" style="background:<COLOR>"></div>
<canvas data-pixer='{"stripes":"4"}' class="js-pixer"></canvas>
<div id="target-2" style="background:<ANOTHER COLOR>"></div>
API
Available methods:
var pixerApi = pixer();
// Reflow all the pixelated borders in the page
pixerApi.reflow();
AUTHORS
Giancarlo Soverini giancarlosoverini@gmail.com
LICENSE
AGPL-3.0