A simple jQuery plugin that reproduces the moving background parallax effect in iOS using only HTML, CSS, and JS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demos
src
.gitignore
CONTRIBUTING.md
LICENSE.md
README.md
package.json

README.md

Simple iOS Parallax Effect

A simple jQuery plugin that reproduces the moving background parallax effect in iOS using only HTML, CSS, and JS

Example Usage

Include jQuery and ios-parallax:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="ios-parallax.js"></script>
<body>
    <div id="elem"></div>
</body>

Add a CSS background image to the target element:

#elem {
  background: url('bg.jpg') no-repeat fixed;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0;
  height: 100%;
}

Initialize the plugin:

$('#elem').iosParallax({
  // How fast the background moves
  movementFactor: 50,
  // How much to dampen the movement (higher is slower)
  dampenFactor: 36
});

Demos

Installation

npm install ios-parallax

Browser Compatibility

No formal testing done yet. Works on modern browsers such as Chrome and Firefox.

License

See the LICENSE file for license rights and limitations (MIT).

Contribute

If you would like to contribute, please read contributing.md for more info

Style

We're using the Google ES6 Javascript Style Guide

Notes

  • If you're defining the background-image property in a separate css file, make sure the CSS file is loaded before calling $.iosParallax();

TODO

  • Determine browser compatibility