Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Erichain/blur-image
A plugin used to make blur effect on image that needs to be preloaded.
https://github.com/Erichain/blur-image
javascript
Last synced: 18 days ago
JSON representation
A plugin used to make blur effect on image that needs to be preloaded.
- Host: GitHub
- URL: https://github.com/Erichain/blur-image
- Owner: Erichain
- License: mit
- Created: 2016-08-14T06:16:32.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-20T05:23:05.000Z (almost 8 years ago)
- Last Synced: 2024-10-07T19:08:31.309Z (about 1 month ago)
- Topics: javascript
- Language: JavaScript
- Homepage: https://github.com/Erichain/blur-image
- Size: 28.3 KB
- Stars: 63
- Watchers: 9
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Blur-Image
A plugin used to make blur effect on image that needs to be preloaded.
Just as Medium does:
## Install
**Use bower**
``` shell
bower install --save blur-image
```
Then, you just import the JavaScript file and Style file into your page as following.
``` html
```
**Use npm packager**
``` shell
npm install --save blur-image
```
And import the files.
``` html
```
In your JavaScript file, you can use `require` to import.
``` javascript
let blurImg = require('blur-image');
```
## Usage
In HTML, just add tags with the following attributes:
``` html
```
- `name`: Must be `blur`.
- `class`: Must be `blur-image-container` (Of course, you can change this in the css file).
- `data-real-width`: Your image's real width.
- `data-real-height`: Your image's real height.
- `data-src`: The small image url to load first in you local directory.
- `src`: The large image's url.
Then, in your `app.js`, just one line, you're all done.
``` javascript
blurImg();
```
## Build
``` shell
git clone https://github.com/Erichain/blur-image.git
```
Run `npm install`.
Run `npm run dev` to start local development.
Run `npm run build` to build.
## License
Release under the MIT license.