Interactive Blurry Background In Vanilla JavaScript – Brusher

Category: Animation , Javascript , Recommended | May 12, 2018
Author: kamranahmedse
Views Total: 62
Official Page: Go to website
Last Update: May 12, 2018
License: MIT

Preview:

Interactive Blurry Background In Vanilla JavaScript – Brusher

Description:

Brusher is a fancy vanilla JavaScript library to create an interactive background that allows you to reveal the blurred background image with a brush effect.

How to use it:

Installation & download.

# Yarn
$ yarn add brusher

# NPM
$ npm install brusher --save

Import the brusher.

import Brusher from 'brusher';

Or import the compiled version of the Brusher library into the document.

<script src="//unpkg.com/brusher/dist/brusher.min.js"></script>

Create a new Brush instance and specify an image to blur.

const brusher = new Brusher({
      image: 'bg.png'
});

Initialize the Brush library and done.

brusher.init();

All possible options to customize the interactive background.

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

Leave a Reply