Anchor Link Typing Animation In jQuery - jTyper

File Size: 4.61 KB
Views Total: 2049
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Anchor Link Typing Animation In jQuery - jTyper

jTyper is a really simple jQuery plugin to create typewriter style typing animations that supports both plain text and anchor links.

How to use it:

1. Link to the necessary JavaScript files as follows:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="jTyper.1.0.0.js"></script>

2. Insert your anchor links to an HTML list.

<ul>
  <li>
      <a href="https://en.wikipedia.org/wiki/AngularJS">AngularJS is a JavaScript-based open-source front-end web application framework.</a>
  </li>
  <li>
      <a href="https://reactjs.org/">React is a JavaScript library for building user interfaces.</a>
  </li>
  <li>
      <a href="https://vuejs.org/">Vue.js is an open-source progressive JavaScript framework for building user interfaces. </a>
  </li>
</ul>

3. Call the function jTyper on the html list.

$(document).ready(function(){
  $('ul').jTyper();
});

4. To config the typing animation, pass the following options to the jTyper function.

$(document).ready(function(){
  $('ul').jTyper({
    speed: 100,
    timeout: 3000
  });
});

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