https://github.com/hughjdavey/ngx-image-blur

Simple image blur loader component for Angular >= 2, inspired by image blur loading on Medium
https://github.com/hughjdavey/ngx-image-blur

angular angular-cli image-blur image-loading

Last synced: 5 days ago
JSON representation

Simple image blur loader component for Angular >= 2, inspired by image blur loading on Medium

• Host: GitHub
• URL: https://github.com/hughjdavey/ngx-image-blur
• Owner: hughjdavey
• License: cc0-1.0
• Created: 2019-07-20T19:42:44.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-07-20T23:47:31.000Z (over 5 years ago)
• Last Synced: 2024-12-31T15:04:24.997Z (10 days ago)
• Topics: angular, angular-cli, image-blur, image-loading
• Language: TypeScript
• Homepage:
• Size: 7.81 KB
• Stars: 1
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# NgxImageBlur

Simple image blur loader component for Angular >= 2, inspired by image blur loading on Medium.

[Demo can be found here](https://hughjdavey.github.io/ngx-image-blur)

### Installation

* `npm install --save ngx-image-blur`

* Edit your app.module file:

``` typescript

...

import { NgxImageBlurModule } from 'ngx-image-blur';

@NgModule({

  ...

  imports: [

    ...

    NgxImageBlurModule

  ],

  ...

})

```

### Usage

##### Type Definitions:

* `type LazyMode = 'eager' | 'half-lazy' | 'lazy'`

  * `eager` - image starts loading as soon as the page loads and does its blur transitions as soon as it can

  * `half-lazy` - image starts loading as soon as the page loads, but delays the blur transition until it comes into view

  * `lazy` - image starts loading only once it comes into view

##### `@Input()` options:

* `height` [string] - desired height of image e.g. '50vh' (required)

* `width` [string] - desired width of image e.g. '500px' (required)

* `previewSrc` [string] - link that can go in a [url()](https://developer.mozilla.org/en-US/docs/Web/CSS/url) (e.g. web link or assets path) to smaller thumbnail version of image (required)

* `width` [string] - link that can go in a [url()](https://developer.mozilla.org/en-US/docs/Web/CSS/url) (e.g. web link or assets path) to full image (required)

* `blurPixels` [integer] - how much blur to apply to the preview image (defaults to 8)

* `transitionDuration` [integer] - time in ms to take for the transition between preview and fill images (defaults to 500, i.e. half a second)

* `objectFit` [string] - [CSS object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) for the image (defaults to 'cover')

* `lazyMode` [LazyMode] - which LazyMode to use for image loading - see above (defaults to 'eager')