reveal-it.js Examples

This jQuery plugin gradually reveals text from left to right to produce a fade-in effect.

Click here for the demo. Get it on github here.

Limitations: The background color must be solid.

Box 1: reveal immediately - on page load

    

        

            
Box 1: Reveal Immediately
            

                
Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus
            
        
    

                     

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

Box 2: reveal after specified delay

Set a background color.

    

        

            
Box 2: Reveals after 3000ms delay
            

                
Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus
            
        
    

                     

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

Box 3: reveal on event - eg. onclick

    

        

            
Box 3: Reveal on click event
            

                

                    
Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus
                
            

            Reveal!
        
    

               

var options3 = {
    id: 'box3'
    , auto: false
};
var box3 = $('.box3');
box3.initReveal(options3);

$('.btn-reveal').on('click', function () {
    box3.performReveal(options3);
});
               

Box 4: Reveal when element scrolls into the viewport

    

        

            
Box 4: Reveal when element scrolls into the viewport
            

                

                    
Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus
                
            
        
    

               

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