A simple jQuery plugin that reproduces the moving background parallax effect in iOS using only HTML, CSS, and JS
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
});npm install ios-parallax
No formal testing done yet. Works on modern browsers such as Chrome and Firefox.
See the LICENSE file for license rights and limitations (MIT).
If you would like to contribute, please read contributing.md for more info
We're using the Google ES6 Javascript Style Guide
- If you're defining the background-image property in a separate css file, make sure the CSS file is loaded before calling
$.iosParallax();
- Determine browser compatibility