jQuery Plugin For Background Parallax Scrolling Effects - xcroller

xcroller is a simple-to-implement jQuery plugin which apply various types of parallax scrolling effects to html elements. 

Currently the plugin has 3 different effects: Sticky, used for element with no background image, Fixed, that makes the element behave like a mask to its background image that covers the whole page, and the default Movable. 

Some effects are better for some situations and worse for others. Choose them very carefully. You also have to pay attention to the size of the images you use. If it is a photograh you should choose a big one, specially if it covers the page's background.

How to use it:

1. Load jQuery library and the jQuery xcroller plugin in the document.

<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="xcroller.js"></script>

2. Add a parallax effect to your element using data-xcmode attribute. Available parallax effects:

• data-xcmode="sticky": The element above has the sticky effect that is ideal for sections where you won't use any background image. It simulates a different scroll speed for those elements. The next elements will overlap this one when the page is scrolled.
• data-xcmode="fixed": The background image covers the whole page's background and the element will be its frame as you scroll down and up, revealing different parts of the image.
• data-xcmode="moving": Default. You can set a speed to both horizontal and vertical axis (it can be negative, that will reverse the movement of the scrolling) and the background image will move as you scroll the page. If no speed is set, it will ignore the horizontal movement and apply a default speed to the vertical axis, that starts low and increases on later elements.
• data-xcmode="infinite": For a better convenience the background stops scrolling when its limits touch the element's borders. If you need it to keep scrolling, if you have a background pattern, for example, you can set the propety infinite, that will allow an infinite scroll. Infinite scroll with phographs usually don't look good because it starts again when the limit is reached.

<div id="parallax-demo" class="demo" 
     data-xcmode="sticky">

  ...
  
</div>

3. Add a background image to the element. You can add CSS style as you wish, but the plugin will make a few assumptions and changes to the target elements. Use inner elements to wrap your content and add style more comfortably. We actually recommend you to add custom styles to the elements where the effects will be applied. This will make you page look much greater!

#parallax-demo {
  text-align: center;
  background-position: center center;
  background-image: url('bg1.jpg');
}

4. Initialize the plugin and done.

new xCroller('.demo');

---

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