The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

reveal-it.js : Gradually reveals text from left to right producing an animated text fade-in effect.

Plugin rate :

Gradually reveals text from left to right producing an animated text fade-in effect.
Limitation: Only works on a solid color background.

Category: Animation and effects
Tags: gradually reveal, fade-in effect, animated text, fade in-out, show text

Implementation: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="text-center">reveal-it.js Examples</h1>
                    <h2 class="sr-only">This jQuery plugin gradually reveals text from left to right to produce a fade-in effect.</h2>
                    <p>
                        <a href="index.html">Click here for the demo.</a>
                        Get it on <a href="https://github.com/erspark2002/reveal-it.js">github here</a>.
                    </p>
                    <p>
                        Limitations: The background color must be solid.
                    </p>
                </div>
            </div>
        </div>
 
 
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <p>
                        Box 1: reveal immediately - on page load
                    </p>
                    <pre class="brush: html">
<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>
                    &nbsp;</pre>
 
<pre class="brush: js;">
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);
});
                    &nbsp;</pre>
                </div>
            </div>
        </div>
 
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <p>
                        Box 2: reveal after specified delay
                    </p>
                    <p>
                        Set a background color.
                    </p>
 
                    <pre class="brush: html;">
<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>
                    &nbsp;</pre>
 
 
                    <pre class="brush: js;">
var options2 = {
    id: 'box2'
    , delay: 3000
    , background: '#555'
};
$('.box2').initReveal(options2);
              &nbsp;</pre>
                </div>
            </div>
        </div>
 
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <p>
                        Box 3: reveal on event - eg. onclick
                    </p>
 
                    <pre class="brush: html;">
<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>
              &nbsp;</pre>
 
                    <pre class="brush: js;">
var options3 = {
    id: 'box3'
    , auto: false
};
var box3 = $('.box3');
box3.initReveal(options3);
 
$('.btn-reveal').on('click', function () {
    box3.performReveal(options3);
});
              &nbsp;</pre>
                </div>
            </div>
        </div>
 
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <p>
                        Box 4: Reveal when element scrolls into the viewport
                    </p>
 
                    <pre class="brush: html;">
<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>
              &nbsp;</pre>
 
                    <pre class="brush: js;">
var options4 = {
    id: 'box4'
    , auto: false
    , trigger: 'on-visible'
};
$('.box4').initReveal(options4);
              &nbsp;</pre>
                </div>
            </div>
        </div>
Options: 
background
String
Default : #fff - set background color.
delay
Integer
Default : 3000 - delay the fade-in effect by specified milliseconds
trigger
String
Default : on-visible - Reveal the text when the element scrolls into the viewport
Methods: 
initReveal(options)
Function
initialise the plugin. eg. $('.box').initReveal(options);

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.7
Current version
0.0.1
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [0]