Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tsung-ju/parallax-background-image
simple, responsive parallax scrolling effect.
https://github.com/tsung-ju/parallax-background-image
parallax
Last synced: 11 days ago
JSON representation
simple, responsive parallax scrolling effect.
- Host: GitHub
- URL: https://github.com/tsung-ju/parallax-background-image
- Owner: tsung-ju
- License: mit
- Created: 2016-10-02T12:40:57.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-04-23T23:26:03.000Z (over 2 years ago)
- Last Synced: 2024-11-07T11:54:03.059Z (about 2 months ago)
- Topics: parallax
- Language: JavaScript
- Homepage:
- Size: 474 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# parallax-background-image
simple, responsive parallax scrolling effect.
## Features
- works on mobile devices
- automatically switch to [pure CSS parallax effect](https://keithclark.co.uk/articles/pure-css-parallax-websites/) if supported by the browser
- zero dependencies
- simple WebComponents-based api
## Demo
## Installation
```sh
npm install parallax-background-image
```
```js
import "parallax-background-image";
```
Or use a CDN:
```html
```
## Basic usage
```html
#wrapper {
position: fixed;
height: 100%;
width: 100%;
}
... contents
nesting is also supported
```
For complete example see `demo.html`
## API
### ``
A scrollable container block. Used to measure the scrolling position of each `` and (when backend=3d) set parameters for perspective transform. Each `` must be contained (directly or indirectly) in an `` for this library to work.
#### Attributes
- `backend`: Selects the method used to apply the parallax effect.
- Supported values: `2d`, `3d`
- Defaults to `3d` if the browser is Blink-based, `2d` otherwise.
### ``
Element with parallax scrolling effect.
#### Attributes
- `image-src`: URL to the background image.
- Required.
- `velocity-x` `velocity-y`: Controls how fast the background scrolls.
- `velocity=1` means scrolling at the same speed as the parent (no parallaxing).
- `velocity=0` means the background does not move at all (fixed background).
- Accepts floating point numbers.
- `velocity-x` defaults to `1`, `velocity-y` defaults to `0.8`.
- `align-x` `align-y`: Aligns the background to the container.
- Accepts `center`, `left`, `right`, `top`, `bottom` and percentage strings (e.g. `80%`).
- `align-x`, `align-y` both defaults to `center`.