Skip to content
A plugin used to make blur effect on image that needs to be preloaded.
JavaScript HTML CSS
Branch: master
Clone or download
Erichain
Erichain Merge pull request #2 from Erichain/dev
Improve: add eslint.
Latest commit 001846e Nov 20, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
src
.eslintrc.js
.gitignore [Improve] Add es6 loader. Aug 28, 2016
.npmignore [Improve] Add a .npmignore. Aug 28, 2016
LICENSE
README.md [Improve] Rewrite bower.json. Aug 28, 2016
bower.json [Improve] Rewrite bower.json. Aug 28, 2016
gulpfile.js [Improve] Update example. Aug 31, 2016
package.json

README.md

Blur-Image

A plugin used to make blur effect on image that needs to be preloaded.

Just as Medium does:

Install

Use bower

bower install --save blur-image

Then, you just import the JavaScript file and Style file into your page as following.

<link rel="stylesheet" href="bower_components/blur-image/dist/blur-image.css">
<script src="bower_components/blur-image/dist/blur-image.js"></script>

Use npm packager

npm install --save blur-image

And import the files.

<link rel="stylesheet" href="node_modules/blur-image/dist/blur-image.css">

In your JavaScript file, you can use require to import.

let blurImg = require('blur-image');

Usage

In HTML, just add tags with the following attributes:

<figure name="blur"
        class="blur-image-container"
        data-real-width="1174"
        data-real-height="670"
        data-src="images/sm2.jpeg"
        src="https://cdn-images-1.medium.com/max/2000/1*0WwtDkE1q6HGZwD6Kn9SuQ.jpeg"
></figure>
<!-- no matter how many tags here -->
  • 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.

blurImg();

Build

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.

You can’t perform that action at this time.