Simple jQuery Plugin For Background Parallax Scrolling Effect - Fallings

Fallings is a new, lightweight jQuery parallax effect plugin used to parallax position-absolute background images as you scroll down/up the web page.

How to use it:

1. Include the jQuery library and jQuery fallings plugin at the end of your document so the page loads faster.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="jquery.fallings.js"></script>

2. Insert an image with <code>visibility:hidden</code> into your container.

<div class="demo"> <img src="img/1.jpg" style="visibility:hidden"/> </div>

3. Add the background image using the image source in the previous step to your container.

.demo {
background: url(img/1.jpg) no-repeat;
background-position: 100%;
background-size: 130%;
width: 100%;
min-height: 100%;
position: relative!important
}

4. Enable the background image parallax effect.

jQuery( document ).ready(function() {
$(".demo").fallings({
bgParallax: true,
bgPercent: '50%'
});
});

5. Available settings with default values.

jQuery( document ).ready(function() {
  $(".demo").fallings({
    velocity: 0,
    initialPosition: 0,
    bgParallax: false,
    bgPercent: "0%",
    onClass: "fallings-visible",
    offClass: "fallings-invisible"
  });
});

Change log:

2017-01-12

• update

---

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