https://github.com/shenfe/img-blur-in

🖼Make images load lazily with a blur-in effect.
https://github.com/shenfe/img-blur-in

image-loading lazy-loading

Last synced: about 1 month ago
JSON representation

🖼Make images load lazily with a blur-in effect.

• Host: GitHub
• URL: https://github.com/shenfe/img-blur-in
• Owner: shenfe
• License: mit
• Created: 2017-10-12T15:37:11.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-23T03:15:08.000Z (about 7 years ago)
• Last Synced: 2024-04-24T22:42:59.430Z (about 1 year ago)
• Topics: image-loading, lazy-loading
• Language: JavaScript
• Homepage:
• Size: 3.93 MB
• Stars: 34
• Watchers: 6
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# img-blur-in

![gzip size](http://img.badgesize.io/https://raw.githubusercontent.com/shenfe/img-blur-in/master/dist/img-blur-in.min.js?compression=gzip)



![downloads](https://img.shields.io/npm/dm/img-blur-in.svg)

![license](https://img.shields.io/npm/l/img-blur-in.svg)

Make images load lazily, with a blur-in effect.



## Usage

### Style

Add the default style below to your CSS.

```css

.img-blur-in {

    -webkit-filter: blur(32px);

    -moz-filter: blur(32px);

    -ms-filter: blur(32px);

    -o-filter: blur(32px);

    filter: blur(32px);

    -webkit-transition: all ease .2s;

    -moz-transition: all ease .2s;

    -ms-transition: all ease .2s;

    -o-transition: all ease .2s;

    transition: all ease .2s;

}

```

**Notice** If you need no CSS effects, just remove the properties. Lazy loading of images can be accomplished as well via this library.

### HTML

Give image tags the CSS class name. Here are three different choices:

```html







```

### JavaScript

Inject or import `img-blur-in`.

#### inject

```html

```

#### import

```bash

$ npm install --save img-blur-in

```

```js

/* index.js */

require('img-blur-in')

```

### Customization

If you have your own CSS class name for images, use it like this:

```js

window.ImgBlurIn.watch('your-class');

```

## Browser Compatibility

* IE10+

* Opera 12+

* Safari 5+

* Chrome

* Firefox

* iOS 6+

* Android 4.4+

## Thanks

* [sentineljs](https://github.com/muicss/sentineljs) -- Detect new DOM nodes using CSS selectors.

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright © 2017-present, [shenfe](https://github.com/shenfe)