Simple Flexible Parallax Scrolling Plugin With jQuery - Parally

Parally is a simple, flexible jQuery parallax scrolling plugin which can be applied to background images or any other DOM elements.

Basic usage:

1. To get started, you need to load both jQuery library and the jQuery Parally plugin in the document.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="parally.js"></script>

2. Apply the plugin to the container which has a background image.

<div class="background-demo"></div>

.background-demo {
  background-image: url(1.jpg);
  background-size: cover;
  background-position: 50% 50%;
  height: 400px;
}

$('.background-demo').parally();

3. Apply the plugin to a specified dom element (e.g. img tag) using CSS3 transform mode.

<img src="1.png">

$('img').parally({
  mode: 'transform'
});

4. All default configuration options.

$('#selector').parally({

  // scrolling speed
  speed: 0.2,

  // 'background'
  // 'transform'
  // function(x,y){}
  mode: 'background',

  // set background images' X position
  xpos: '50%',

  // use the outer height of element
  outer: true,

  // vertical offset in pixels
  offset: 0

});

---

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