Cool Text Reveal Effect With jQuery - delay-text.js

delay-text.js is a tiny jQuery plugin to create a cool text reveal effect that displays text character by character in sequence or randomly.

How to use it:

1. Download the plugin and insert the JavaScript delay-text.js after jQuery library (slim build).

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/delay-text.js"></script>

2. Call the function on your text and the plugin will do the rest.

<p class="example">
  123 lectus vestibulum mattis ullamcorper. Elementum nisi quis eleifend quam. Facilisi morbi tempus iaculis urna. Amet consectetur adipiscing elit ut aliquam purus sit amet luctus. Amet facilisis magna etiam tempor orci eu. Pharetra diam sit amet nisl. Sit amet nisl purus in mollis. Adipiscing diam donec adipiscing tristique risus nec feugiat in fermentum. Dictumst quisque sagittis purus sit amet volutpat. Nunc aliquet bibendum enim facilisis gravida. Sit amet luctus venenatis lectus magna fringilla urna porttitor. Fermentum odio eu feugiat pretium. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean. Urna cursus eget nunc scelerisque viverra mauris in. Odio pellentesque diam volutpat commodo. Sit amet facilisis magna etiam tempor orci. Et malesuada fames ac turpis egestas integer eget. Sed viverra ipsum nunc aliquet bibendum.

  Sit amet tellus cras adipiscing enim eu turpis. Velit dignissim sodales ut eu sem integer. Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer. Facilisis volutpat est velit egestas. Nulla facilisi morbi tempus iaculis urna id volutpat. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Imperdiet dui accumsan sit amet nulla. Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Pretium vulputate sapien nec sagittis. Maecenas pharetra convallis posuere morbi leo. Mattis pellentesque id nibh tortor id aliquet lectus proin. Adipiscing elit pellentesque habitant morbi tristique senectus et netus et. Faucibus nisl tincidunt eget nullam. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. Scelerisque eleifend donec pretium vulputate sapien nec. Eu nisl nunc mi ipsum faucibus vitae. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Morbi tincidunt augue interdum velit euismod in pellentesque. Leo vel fringilla est ullamcorper eget nulla facilisi.

  Neque convallis a cras semper. Tellus orci ac auctor augue mauris augue neque gravida. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Ultrices gravida dictum fusce ut placerat. Adipiscing elit pellentesque habitant morbi tristique. Vitae tempus quam pellentesque nec nam aliquam sem et. Vitae suscipit tellus mauris a diam maecenas sed enim ut. Elementum pulvinar etiam non quam lacus suspendisse faucibus interdum posuere. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Ultrices eros in cursus turpis massa tincidunt dui ut ornare. Malesuada proin libero nunc consequat interdum. Est ante in nibh mauris cursus mattis molestie. Non consectetur a erat nam at. Nibh venenatis cras sed felis.
</p>

$(function(){
  $('.example').delayText();
});

3. Determine the animation speed in milliseconds. Default: 1000.

$(function(){
  $('.example').delayText({
    time: 5000
  });
});

4. Reveal the text in sequence. Ideal for creating a typewriter like text typing effect. Default: false.

$(function(){
  $('.example').delayText({
    sequential: true
  });
});

---

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