jQuery Plugin To Fade Out Element On Scroll - VOpacity

VOpacity is a lightweight jQuery plugin used to fade out Html elements by adding CSS opacity property (0~1) when they're scrolled out of the viewport.

See also:

• Simple jQuery Plugin To Fade Out Panels As You Scroll Down
• Simple Slide and Fade Out Html Elements Plugin with jQuery
• jQuery Plugin To Fade In Elements When They Enter The Viewport - Lazy View

Basic usage:

1. Use the Html5 data-content-dynamic-opacity-class attribute to specify which child element you wish to fade out on scroll.

<div class="vopacity"
     data-content-dynamic-opacity-class="vopacity-inner-content">
  <div class="vopacity-inner-content">
    Your content goes here
  </div>
</div>

2. Include jQuery library and the jQuery VOpacity plugin in your document.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="jquery.vopacity.js"></script>

3. Call the plugin on the parent element and done.

// $fn.vopacity(extraDownSpeed, outerHeight)
$(document).ready(function() {
  $('.vopacity').vopacity(0.15, true);
});

---

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