https://github.com/phucbm/bg-prlx

No-dependency npm package to create parallax effect for images.
https://github.com/phucbm/bg-prlx

npm-package parallax

Last synced: 25 days ago
JSON representation

No-dependency npm package to create parallax effect for images.

• Host: GitHub
• URL: https://github.com/phucbm/bg-prlx
• Owner: phucbm
• License: mit
• Created: 2022-04-29T14:23:12.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-01T05:13:55.000Z (over 2 years ago)
• Last Synced: 2024-09-15T04:05:53.918Z (about 2 months ago)
• Topics: npm-package, parallax
• Language: JavaScript
• Homepage: https://phucbm.github.io/bg-prlx
• Size: 6.84 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# bg-prlx

[![release](https://badgen.net/github/release/phucbm/bg-prlx/?cache=600)](https://github.com/phucbm/bg-prlx/releases/latest)

[![license](https://badgen.net/github/license/phucbm/bg-prlx/)](https://github.com/phucbm/bg-prlx/blob/main/LICENSE)

> Create parallax effect for inline `background-image` or `object-fit:cover`.

## Install

```sh

npm i bg-prlx

```

## Usage

Simply add attribute `data-parallax` to your HTML.

### Setup HTML

With inline `background-image`:

```html



    



```


Or with ``:

```html



    



```


> Note: In order to have parallax effect, the block that contains the image must have a smaller height

> than the real image's height. In the example above, the image size is 1920x1280, while the block size has ratio of 1920x800.

### Run script

```js

import backgroundParallax from "./index.js";

backgroundParallax();

```

## API

### backgroundParallax(elements?)

#### elements

Type: `DOM element`

Default value is `document.querySelectorAll("[data-parallax]:not(.parallax-enabled)")`.

## License

[MIT License](https://github.com/phucbm/bg-prlx/blob/main/LICENSE)

Copyright (c) 2022 Minh-Phuc Bui