Typing Animation is a JavaScript and CSS library that allows you to create typing animation easily using only a few lines of code.
- Fast and light
- Need a few lines of code to write complex code
- Possibility to simulate the delay beetween the typed letters
- Animated caret like the one of an input field
You must clone the repository inside your project
git clone https://github.com/vladpostu/TA-Typing-Animation.git then include the CSS file TA.css in the tag
<html
...
<head>
...
<link rel='stylesheet' href='./TA/TA.CSS'>
</head>
</html>and the Javascript file TA.js and the bottom of the tag but before the main js file
<html>
<body>
...
<script src='./TA/TA.js'></script>
<script src='./js.js'></script> <!-- main Javascript file -->
</body>
</html>Initially a TA object must be initialized.
The parameters are:
- htmlEl: [String] HTML query selected element
- minDelay: [int] minium delay beetween the letters typed
- maxDelay: [int] maxium delay beetween the letters typed
let ta = new TA({
htmlEl: "#test",
minDelay: 50,
maxDelay: 150,
});- finalForm: [String] is the final text to reach
- i: [int] iterator function, must be 0 at the first call of the function
Is the typing forward animation. Insert the final word in the parameters.
ta.typingForward("testing the library...", 0);- finalForm: [String] is the final text to reach
Is the typing backward cancel animation. Insert the final word in the parameters.
ta.typingBackward("testing"); // the HTML element textContent before the function was "testing the library..."To simulate an animated caret add caret class the the HTML element.
<div class='caret'></div>Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.