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: 3 months 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 (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-05-01T05:13:55.000Z (about 4 years ago)
- Last Synced: 2025-03-17T10:22:36.353Z (over 1 year 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
[](https://github.com/phucbm/bg-prlx/releases/latest)
[](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