About This Blog
Add typed.js In Your Webite / Blog With HTML and JAVASCRIPT it is founded by Coding Vlogs youtube Channel. you can download the source code or copy source code and use it for free. if you have not subscribe our youtube channel so subscribe now we are creating beautiful coding project and provide source code for free. For Download Source Code Scroll Down
Why We Use Typed.js?
In This Blog You Will Learn How to Make or Add typed.js In Your Webite / Blog easily. And lots of websites use this technology for example- Coding Vlogs, Cocota Studio, etc. In this post, we’re going to talk about typed.js tutorial. A JavaScript library that will help you create a typing animation on your web page. A good idea for a welcome message to your website visitor or simulating a development console and much more.
For Beginner or Not?
This article is beginner-friendly, but to understand some concepts you should have basic knowledge of HTML, CSS And Javascript. Customizing The Code with JavaScript is pretty simple,
1. For add typed.js to your site take a span tag and give it a class as type (Step.1)
<center><h1 class="class">Hey! We The <span class="type"></span></h1></center>
2. Now link typed.js to your site. code is given below (Step.2)
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
OR
<script src="YOURFILE/typed.js"></script>
Download typed.js code link is given below
3. Script To add text inside span tag (Step.3)
var typed = new Typed('.type', {
strings: [
'Developer',
'Freelancer',
'Blogger',],
typeSpeed: 50,
backSpeed: 50,
loop:true
});
4. You can control Typing by typeSpeed: 50, and Backspace by backSpeed: 50, speed by (Step.3)
typeSpeed: 50, backSpeed: 50,
This was a basic animaion that we created. You can do much more by adding some cool hover effects, shadow effects, coloring, borders, etc.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Coding Vlogs</title>
</head>
<body>
<center><h1 class="class">Hey! We The <span class="type"></span></h1></center>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed = new Typed('.type', {
strings: [
'Developer',
'Freelancer',
'Blogger',],
typeSpeed: 50,
backSpeed: 50,
loop:true
});
</script>
</body>
</html>
That's all now our custom cursor is ready. You can implement in your site / blog. If you Like our Post so please click on this Like button and don't forgot to Subscribe Our Youtube Channel. Follow us on social media Link is given below. And Share This Blogs To your Friends and Family.