jQuery Plugin To Reveal Text with Fade-in Effects - reveal-it.js

reveal-it.js is a jQuery plugin to reveal your text with a lazy load like fade-in effect based on CSS3 opacity and transitions.

How to use it:

1. Include the jQuery reveal-it.js plugin's stylesheet in the head section of your webpage.

<link href="css/reveal-it.css" rel="stylesheet">

2. Include jQuery library and the jQuery reveal-it.js plugin's script before the closing body tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/reveal-it.js"></script>

3. Reveal text immediately - on page load.

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <p>Box 1: Reveal Immediately</p>
      <div class="box1">
        <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>
      </div>
    </div>
  </div>
</div>

jQuery(function () {
  //Box 1: reveal immediately - on page load
  //NOTE: id does refer to an element id, It is used to
  //    uniquely refer to the element to be revealed.
  var options1 = {
    id: 'box1'
  };
  $('.box1').initReveal(options1);
});

4. Reveal text after specified delay.

<div class="container" style="background-color: #555;">
  <div class="row">
    <div class="col-xs-12">
      <p>Box 2: Reveals after 3000ms delay</p>
      <div class="box2">
        <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>
      </div>
    </div>
  </div>
</div>

var options2 = {
  id: 'box2'
  , delay: 3000
  , background: '#555'
};
$('.box2').initReveal(options2);

5. Reveal text on event.

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <p>Box 3: Reveal on click event</p>
      <div>
        <div class="box3">
          <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>
        </div>
      </div>
      <button class="btn btn-primary btn-reveal">Reveal!</button>
    </div>
  </div>
</div>

var options3 = {
  id: 'box3'
  , auto: false
};
var box3 = $('.box3');
box3.initReveal(options3);
 
$('.btn-reveal').on('click', function () {
  box3.performReveal(options3);
});

6. Reveal text when element scrolls into the viewport.

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <p>Box 4: Reveal when element scrolls into the viewport</p>
      <div>
        <div class="box4">
          <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>
        </div>
      </div>
    </div>
  </div>
</div>

var options4 = {
  id: 'box4'
  , auto: false
  , trigger: 'on-visible'
};
$('.box4').initReveal(options4);

---

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