iOS-Style Background Parallax Scrolling Plugin With jQuery - ios-parallax.js

ios-parallax.js is an iOS inspired parallax scrolling jQuery plugin for creating an interactive moving background that reacts to user's cursor.

How to use it:

1. Download and insert the JavaScript file ios-parallax.js after jQuery library like this:

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

2. Initialize the plugin on the target container element.

$('#myContainer').iosParallax();

3. Add your own background image to the container.

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

4. Config the parallax scrolling effect:

$('#myContainer').iosParallax({

  // How fast the background moves
  movementFactor: 50,

  // How much to dampen the movement (higher is slower)
  dampenFactor: 36
  
});

Change log:

2017-05-06

• Removing deprecated $.load, now using $.on("load", function)

---

This awesome jQuery plugin is developed by noobcola. For more Advanced Usages, please check the demo page or visit the official website.