Simple Flexible Parallax Scrolling Plugin With jQuery - Parally

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.

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.

  • Publication date: 12.02.2019
  • Source