Configurable Text Reveal Effect With jQuery - Textyle.js

The jQuery Textyle.js plugin makes uses of jQuery animate() and CSS properties to create fancy configurable text reveal effect for attractive titles and headings.

How to use it:

1. Load the minified version of the jQuery Textyle.js plugin after jQuery JavaScript library.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="textyle.min.js"></script>

2. Attach the function textyle() to the text container and done.

<p class="demo">
  jQueryScript
</p>

$(function(){

  $('.demo').textyle();

});

3. Customize the duration of the animation. Default: 400ms.

$('.demo').textyle({
  duration : 500
});

4. Customize delay in milliseconds. Default: 100ms.

$('.demo').textyle({
  delay : 200
});

5. Customize the easing function.

$('.demo').textyle({
  easing : 'swing'
});

6. Apply more effects to the text using the callback.

$('.demo').textyle({
  callback : function(){
    $(this).css({
      color : 'coral',
      transition : '1s',
      // more css here
    });
  }
});

Changelog:

2019-05-25

• Deleted console message about callback function

2019-01-07

• Improved performance

---

This awesome jQuery plugin is developed by mycreatesite. For more Advanced Usages, please check the demo page or visit the official website.