Speckle.js

Getting Started

Installation

npm install speckle-js

Usage

Import the module.

// Import the module using ES6.
import Speckle from 'speckle-js';

// Import the module using CommonJS.
const Speckle = require('speckle-js');

Use the constructor by passing a valid HTML element as the first argument, and an options object of key: value pairs as the second argument.

new Speckle(element, options);

Options

Option	Type	Default	Description
`quantity`	int	`56`	Quantity of speckles.
`minSize`	int	`4`	The smallest speckle (px). Must be greater than `1` and less than `maxSize`
`maxSize`	int	`56`	The largest speckle (px). Must be greater than `1` and greater than `minSize`
`tbOffset`	float	`8`	Top/Bottom offset (%). Must be greater than or equal to `0`. This is the maxiumum distance that speckles can be rendered from the top/bottom of the container element.
`lrOffset`	float	`8`	Left/Right offset (%). Must be greater than or equal to `0`. This is the maximum distance that speckles can be rendered from the left/right of the container element.
`minOpacity`	float	`12.5`	The most transparent a speckle can be (%). This is a percentage where `100` means 100% opacity, and `0` means 0% opacity. This must be between `0` and `100`, and less than `maxOpacity`
`maxOpacity`	float	`87.5`	The most opaque a speckle can be (%). This is a percentage where `100` means 100% opacity, and `0` means 0% opacity. This must be between `0` and `100`, and greater than `minOpacity`
`isBokeh`	bool	`false`	Whether the speckles should blur as a factor of distance (Bokeh lights effect) or not.
`color`	string		The speckle color. If this is a falsy value, a random hex color will be generated using Speckle's `getRandomHex()` method.
`zIndex`	int	`0`	The CSS `z-index` of the speckles.
`isCropped`	bool	`false`	Whether to apply `overflow: hidden;` to the container element or not.
`tagName`	string	`I`	What HTML tag name the speckles should be rendered as. This string must be capitalized.
`attributes`	obj		An object of valid HTML attributes as `key: value` pairs to be added to the speckles.

Examples

Default

Using the module in it's simplest form:

HTML

<div id="default"></div>

JavaScript

new Speckle(document.querySelector('#default'));

Large

HTML

<div id="large"></div>

JavaScript

new Speckle(document.querySelector('#large'), {
	quantity: 25, 
	minSize: 128, 
	maxSize: 256, 
	tbOffset: 20, 
	lrOffset: 20, 
});

Small

HTML

<div id="small"></div>

JavaScript

new Speckle(document.querySelector('#small'), {
	quantity: 96, 
	minSize: 4, 
	maxSize: 16, 
});

Mono

HTML

<div id="mono"></div>

JavaScript

new Speckle(document.querySelector('#mono'), {
	color: '#000000', 
});

A Lot

HTML

<div id="alot"></div>

JavaScript

new Speckle(document.querySelector('#alot'), {
	quantity: 360, 
	tbOffset: 0, 
	lrOffset: 0, 
});

A Little

HTML

<div id="alittle"></div>

JavaScript

new Speckle(document.querySelector('#alittle'), {
	quantity: 12, 
});

Art Deco

HTML

<div id="deco"></div>

JavaScript

new Speckle(document.querySelector('#deco'), {
	quantity: 6, 
	minSize: 256, 
	maxSize: 768,
	tbOffset: 0, 
	lrOffset: 0, 
});

Crop

HTML

<div id="crop"></div>

JavaScript

new Speckle(document.querySelector('#crop'), {
	quantity: 6, 
	minSize: 256, 
	maxSize: 768,
	tbOffset: 2, 
	lrOffset: 2, 
	isCropped: true, 
});

Bokeh

HTML

<div id="bokeh"></div>

JavaScript

new Speckle(document.querySelector('#bokeh'), {
	isBokeh: true, 
	color: '#67b0ff', 
	quantity: 24, 
	minSize: 8, 
	maxSize: 112, 
	lrOffset: 20, 
	tbOffset: 20, 
	minOpacity: 25, 
	maxOpacity: 50, 
});

Multi

Multiple Speckles instances may be applied to a container element, all with their own options. Speckle keeps track of itself programattically through it's class, as well as through data-speckle-* attributes on the container element and the speckles themselves.

Note: Destroying or rerendering one instance will not affect the others.

HTML

<div id="multi"></div>

JavaScript

// First, store the container element.
const multi = document.querySelector('#multi');

// Then, apply the speckle instances as layers.
// Use the zIndex option to organize their elevations.

// Layer 1
new Speckle(multi, {
	tbOffset: 36, 
	lrOffset: 36, 
	zIndex: 2, 
});

// Layer 2
new Speckle(multi, {
	quantity: 4, 
	minSize: 8, 
	maxSize: 256, 
	tbOffset: 24, 
	lrOffset: 24, 
	zIndex: 4, 
});

// Layer 3
new Speckle(multi, {
	isBokeh: true, 
	quantity: 24, 
	minSize: 8, 
	maxSize: 128, 
	tbOffset: 24, 
	lrOffset: 24, 
	minOpacity: 25, 
	maxOpacity: 50, 
	zIndex: 6, 
});

Space

HTML

<div id="space"></div>

JavaScript

const space = document.querySelector('#space');

new Speckle(space, {
	quantity: 36, 
	tbOffset: 0, 
	lrOffset: 0, 
	minSize: 2,
	maxSize: 6,
	minOpacity: 64, 
	maxOpacity: 87.5, 
	isCropped: true, 
	zIndex: 2, 
});

new Speckle(space, {
	quantity: 128, 
	color: '#ffffff', 
	tbOffset: 0, 
	lrOffset: 0, 
	minSize: 2,
	maxSize: 6,
	minOpacity: 87.5, 
	maxOpacity: 100, 
	isCropped: true, 
	zIndex: 0, 
});

Cheese

HTML

<div id="cheese"></div>

JavaScript

new Speckle(document.querySelector('#cheese'), {
	color: '#ffffff', 
	quantity: 32,
	minSize: 16,
	maxSize: 64,
	minOpacity: 100, 
	maxOpacity: 100, 
	tbOffset: 4, 
	lrOffset: 4, 
});