Creating a dynamic typing animation that looks like the text is being typed by a typewriter has now become possible using a jQuery plugin – Typed.js
The typing effect is really awesome when viewed live and is quite easy to achieve by anyone either by a coder or a non-coder.
Let’s see how:
Typed.js – How to create a Typing Animation?
The jQuery plugin that will help you achieve the typewriter effect is Typed.js.
Typed.js is a jQuery plugin developed by Mattboldt that gives a very cool text typing animation to all the text where the animation is applied.
Working of Typed.js:
A user just have to Enter the First sentence and the Second sentence, and now the animation begins. The plugin will type the first sentence at the speed you’ve set, and then the plugin will backspace what it’s typed, and begin the second sentence. This is how the animation goes through every time.
- Now to get the typing effect you just have to download and install the Zip file from the official site of Typed.js.
- Now after installation just insert the below code in the web files in between the <head> </head> tags.
<script src="jquery.js"></script>
<script src="typed.js"></script>
<script>
$(function(){
$(".element").typed({
strings: ["First sentence.", "Second sentence."],
typeSpeed: 0
});
});
</script>
<div class="element"></div>
Note: Make your CSS changes as per your wish using the class defined or your custom class.
Must Read: Animate your Website Text, Logos, Images with this CSS3 Tool
Enter the First sentence and Second sentence of your choice in the strings tag, also enter the typing speed above in the code and then check out the code’s working.
Now to further increase customization in the code:
To wait or pause for a specific period of time in middle of the string.
<script>
$(function(){
$(".element").typed({
strings: ["First ^2000 sentence.", "Second sentence."] // Waits 2000ms after typing "First"
});
});
</script>
Some more of the changes in the code, If you want the code to-
Restrict First Element from Backspace in Typed.js:
HTML Code:
<h2><span class="first"></span><span class="second"></span></h2>
jQuery Code:
$(function(){
$("h2 .first").typed({
strings: ["Run this Code. "],
typeSpeed: 0,
callback: function() {
showThis();
},
});
function showThis(){
$("span.second").typed({
strings: ["This is Typed.js", "Typewriter Effect", "Typing Effect", "Typing Animation"],
backDelay: 1500,
typeSpeed: 100,
backSpeed: 100,
loop: true,
});
}
});
Now this code will not backspace the First Sentence and will only backspace the Second sentence with the third and the fourth.
This is how you can make several changes in the code and change your complete website to a very super looking animated website in just few minutes with the help of such short GitHub projects and plugins.
![\"DMCA.com](\"//images.dmca.com/Badges/dmca_protected_sml_120l.png?ID=4d9e9c3d-af1d-4344-95f0-d4db66a25c1f\")
Leave a Reply