jQuery Plugin To Show Reveal Text With Fade Effect | reveal-it.js

jquery-reveal-text-animation

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

jquery text animation, text slider animation jquery, jquery random text animation, jquery text plugin, jquery typed text, text animation plugins, text change animation jquery

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

How to make use of it:

1. Include the jQuery plugin’s reveal-it.js 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 before marking the closing body.

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

jQuery Plugin To Reveal Text with Fade-in Effects, reveal-it.js Plugin/Github, jquery show effects demo


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.

Share