Fondo borroso interactivo en Vanilla JavaScript-brusher
| Autor: | kamranahmedse |
|---|---|
| Views Total: | 1,106 |
| Sitio oficial: | Ir a la web |
| Actualizado: | May 12, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Brusher es una librería JavaScript de lujo para crear un fondo interactivo que le permite revelar la imagen de fondo borrosa con un efecto de pincel.
Funcionamiento
Instalación & descarga.
# Yarn $ yarn add brusher # NPM $ npm install brusher --save
Importa el brusher.
import Brusher from 'brusher';
O importar la versión compilada de la biblioteca brusher en el documento.
<script src="//unpkg.com/brusher/dist/brusher.min.js"></script>
Cree una nueva instancia de Brush y especifique una imagen para difuminar.
const brusher = new Brusher({
image: 'bg.png'
}); Inicialice la biblioteca de pinceles y listo.
brusher.init();
Todas las opciones posibles para personalizar el fondo interactivo.
const brusher = new Brusher({
// Put the blur back after user has cleared it
keepCleared: true,
// Stroke size for the brush
stroke: 80,
// Brush style (round, square, butt)
lineStyle: 'round',
// Brusher will use the provided image for the blurry background
autoBlur: false,
// Blur strength in pixels
autoBlurValue: 15
});
