https://github.com/moox/parallaxify
Add parallax effect to your page when scrolling. No dependency.
https://github.com/moox/parallaxify
Last synced: about 1 year ago
JSON representation
Add parallax effect to your page when scrolling. No dependency.
- Host: GitHub
- URL: https://github.com/moox/parallaxify
- Owner: MoOx
- License: mit
- Created: 2014-04-02T05:43:18.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2017-11-21T06:47:15.000Z (over 8 years ago)
- Last Synced: 2025-03-27T04:12:32.903Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://moox.io/parallaxify/
- Size: 14.6 KB
- Stars: 17
- Watchers: 4
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE-MIT
Awesome Lists containing this project
README
# [Parallaxify](http://moox.io/parallaxify/)
> Such deep. Very scroll. Wow background.
Parallaxify allow you to add parallax effect to background images when scrolling.
It's a simple standalone JavaScript module (no jQuery or similar required) that is
_less thant 1kb (minified & gzipped)_.
## Installation
You can install parallaxify from **npm**
```shell
$ npm install parallaxify
```
Or using **bower**
```shell
$ bower install parallaxify
```
Parallaxify can obviously be downloaded directly.
## No dependencies
_There is nothing you need. No jQuery or something._
## Compatibility
Parallaxify should work with IE < 9 if you add [`window.getComputedStyle` polyfill](http://snipplr.com/view/13523/).
## Usage
```js
new Parallaxify({
elements: ".js-Parallaxify" // default
, backgroundYMin: 100 // default
, backgroundYMax: 0 // default
}).registerUpdate()
```
This will enable Parallaxify on this kind of HTML elements
```html
```
Note that the elements must have content or width/height.
See the [example page](src/index.html) to check what you might need.
### Options
#### `elements` (String or Array, default ".js-Parallaxify")
CSS Selector to use to retrieve elements to apply Parallaxify.
Can be an array of elements, an HTMLCollection, or a NodeList.
```js
new Parallaxify({ elements: document.getElementsByClassName(".parallax") }
```
#### `backgroundYMin` (Integer, default 100)
Default background position Y value when the element appears in the viewport.
Can be define for each elements using `data-parallaxify-y-min`.
See the [test page](src/index.html) for examples.
#### `backgroundYMax` (Integer, default 0)
Background position Y value when the element appears in the viewport.
Can be define for each elements using `data-parallaxify-y-max`.
See the [test page](src/index.html) for examples.
### API
#### `Parallaxify.toArray()`
Transform HTMLCollection, NodeList or similar to an array of DOM elements.
#### `Parallaxify.prototype.update()`
Just update Parallaxify elements.
__You don't need to use this method unless you want to have full control of Parallaxify behavior.__
#### `Parallaxify.prototype.requestUpdate()`
Used to call `update()` method through `requestAnimationFrame()`.
#### `Parallaxify.prototype.registerUpdate()`
Use this function to enable Parallaxify automatically `requestUpdate()`.
It create a `requestAnimationFrame` loop but trigger update only if scroll have changed (just using window scroll give laggy results),
This will also attach the same behavior to window resize. Just to be sure.
If you don't want to make a requestAnimationFrameLoop, you can eventually listen
window scroll/resize & trigger `update()` and can skip `registerUpdate()`/`requestUpdate()`.
Note that it will probably result to more laggy results.
---
## [Changelog](CHANGELOG.md)
## Contributing
Please read the file nobody reads (make me lie) [CONTRIBUTING.md](CONTRIBUTING.md)
### tl;dr;
Fork, clone, then
```shell
$ npm i -g gulp
$ npm i
$ gulp
```
Now you can work on the file, then make a commit and a push something when gulp doesn't show any error.
Thanks.
## [License](LICENSE-MIT)