jQuery’s reveal-it.js plugin gradually reveals text from left to right to produce a fade-in effect.

Features

• Detect text instantly
• Text detection after a specified time limit
• Reveal text in a click event
• Reveal text when the element moves to the viewport

Must Read: Hover To Reveal Part Of A Background Image Using jQuery

How to make use of it:

1. Include the jQuery plugin’s reveal-it.css stylesheet in the header section of your web page.

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

2. Include the jQuery library and jQuery unlock-it.js component.

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

3. Detect text instantly – when the page loads.

<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. Text detection after a specified time limit.

<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>

5. Reveal the text of the 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 the text when the item is scrolled to 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);

See Demo And Download

Official Website(erspark2002): Click Here

This superior jQuery/javascript plugin is developed by erspark2002. For extra Advanced Usage, please go to the official website.