Add Customizable Speckles To Elements – speckle.js

Preview:

Description:

speckle.js is a dependency-free JavaScript library that adds customizable, easy-to-style speckles to any elements.

How to use it:

Install and import the Speckle library.

# NPM
$ npm install speckle-js --save

import Speckle from 'speckle-js';

Or include the compiled version of the Speckle.js on the page.

<script src="build/speckle.js"></script>

Apply a default speckle effect to the element you specify.

<h1 class="demo">speckle.js Demo</h1>

new Speckle(document.querySelector('.demo'));

To config the Speckle, pass the following options object as the second parameter to the Speckle function.

new Speckle(document.querySelector('.demo'),{
    quantity: 56, // quantity of speckles
    minSize: 4, // smallest speckle (1+, less than `maxSize`, px)
    maxSize: 56, // largest speckle (1+, greater than `minSize`, px)
    tbOffset: 56, // top/bottom offset (0+, px)
    lrOffset: 56, // left/right offset (0+, px)
    minOpacity: 12.5, // minimum opacity (1-100)
    maxOpacity: 87.5, // maximum opacity (1-100)
    isBokeh: false, // bokeh effect (blur as a factor of distance)
    color: '', // color (hex, rgb, hsl, keyword). If none, the colors will be randomized.
    zIndex: 0, // z-index (bokeh: the starting z-index)
    isCropped: false, // apply `overflow: hidden;` to the container
    tagName: 'I', // the Tag Name that the speckle should be rendered as
    attributes: null // attributes object as `key: value` pairs
});