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
jQuery Plugin To Allow You To Erase Single Image To Reveal
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 Usages, please go to the official website.
Be First to Comment