Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kamranahmedse/brusher
Create beautiful webpage backgrounds
https://github.com/kamranahmedse/brusher
Last synced: 21 days ago
JSON representation
Create beautiful webpage backgrounds
- Host: GitHub
- URL: https://github.com/kamranahmedse/brusher
- Owner: kamranahmedse
- License: mit
- Created: 2018-05-06T19:44:30.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-04T08:30:13.000Z (over 4 years ago)
- Last Synced: 2024-06-02T14:44:01.685Z (22 days ago)
- Language: JavaScript
- Homepage: http://kamranahmed.info/brusher
- Size: 21.3 MB
- Stars: 743
- Watchers: 16
- Forks: 46
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: license
Lists
- awesome-stars - brusher
- awesome-stars - brusher - Create beautiful webpage backgrounds (JavaScript)
- awesome-stars - brusher
- my-awesome-stars - kamranahmedse/brusher - Create beautiful webpage backgrounds (JavaScript)
README
> Little vanilla JS library to add interactive backgrounds to your webpages - [View Demo](http://kamranahmed.info/brusher)
## Installation
Install it using yarn or npm
```bash
yarn add brusher
```
Or you may use unpkg
```
http://unpkg.com/brusher/dist/brusher.min.js
```
## Usage
For the basic usage, all you need to do is create an instance of `Brusher` and provide an image
```javascript
import Brusher from 'brusher';
const brusher = new Brusher({
image: 'abstract.png'
});
brusher.init();
```
## Available Options
Here is the list of options that you may use
```javascript
const brusher = new Brusher({
image: 'abstract.png', // Path of the image to be used as a brush
keepCleared: true, // Put the blur back after user has cleared it
stroke: 80, // Stroke size for the brush
lineStyle: 'round', // Brush style (round, square, butt)
autoBlur: false, // Brusher will use the provided image for the blurry background
autoBlurValue: 15, // Blur strength in pixels
});
brusher.init();
```
A note on blurry background: although brusher is capable of generating blurry background by itself, it is recommended that you [blur the image yourself](http://pinetools.com/blur-image) and apply it to the body for improved performance. Brusher relies on CSS blur for the background. And rendering performance for the pre-provided blurred image would be of-course much better than that applied using CSS. Here is the sample CSS that you may use for the background
```css
body {
background-size: cover;
background-position: 0 0;
background-attachment: fixed;
background-image: url(path/to/blurred/image.jpg);
}
```
## License
MIT © [Kamran Ahmed](https://twitter.com/kamranahmedse)