Añadir Speckles personalizables a Elements-speckle. js

Vista prévia

Descripción

speckle. js es una biblioteca JavaScript libre de dependencias que agrega motas personalizables y fáciles de estilo a cualquier elemento.

Funcionamiento

Instale e importe la biblioteca de speckle.

# NPM
$ npm install speckle-js --save

import Speckle from 'speckle-js';

O incluya la versión compilada de speckle. js en la página.

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

Aplique un efecto de moteado predeterminado al elemento que especifique.

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

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

Para establecer el speckle, pase el siguiente objeto Options como segundo parámetro a la función speckle.

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
});