jQuery Plugin To Fade In Blocks As You Scroll - indyFadeBox

indyFadeBox is an ultra small JQuery plugin that fades/slides in any block of content as you scroll down the page, similar to the lazy load effect. Powered by CSS3.

How to use it:

1. Include the required indyFadeBox.css stylesheet in the head section of your html page.

<link rel="stylesheet" href="css/indyFadeBox.css">

2. Include the jQuery indyFadeBox plugin after jQuery library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="css/indyFadeBox.css">

3. Add the CSS class to your content blocks.

<section id="demo">

  <figure class="indy-fade-box">
    <img src="img/1.jpg" alt="">
  </figure>
  <figure class="indy-fade-box">
    <img src="img/2.jpg" alt="">
  </figure>
  <figure class="indy-fade-box">
    <img src="img/3.jpg" alt="">
  </figure>
  ...

</section>

4. Call the plugin to enable the fade in effect.

$(window).on('load', function() {

  $('#demo').indyFadeBox();

});

5. Default options.

$('#demo').indyFadeBox({

// Add your own effects in the CSS
'effect'    : 'fade-in',

// CSS class for items
'clName'    : '.indy-fade-box',  

});

---

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