0
0
0
dark
0
0
0
Hand-Picked Top-Read Stories
Trending Tags
1 share
1
0
0
1 minute read
No comments

Amazing Typing Effect using Typed.js (JavaScript)

Naman Sarawgi
October 15, 2022
amazing-typing-effect-using-typed.js-(javascript)
Total
1
Shares
1
0
0

Hello Guys! Welcome to Coding Torque. In this blog, I’m going to explain to you how to make an amazing typing effect using Typed.js. This will be a step-by-step guide including HTML and CSS. Let’s get started ๐Ÿš€.

Let’s cover HTML Part

We use HTML to make the skeleton of a website. HTML is a markup language.

Now let’s import the fonts using Google Fonts API. Below is the code for Poppins Font. Paste the below code in tag. 

 rel="preconnect" href="https://fonts.googleapis.com">
 rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

Now let’s design the container in our tag. In the below HTML code, we have created a container that contains welcome heading and designation which will have a type effect. 

 class="container">
    
Hi! I'm Piyush Patil

    
 style="display: flex; align-items: center;">
         id="designation">

Add the below script tag before ending your body tag. This is the CDN of typed.js JavaScript Library

Here is the final HTML code


 lang="en">


    
     charset="utf-8">
     name="viewport" content="width=device-width, initial-scale=1">

    
     rel="preconnect" href="https://fonts.googleapis.com">
     rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    </span>Amazing Type Effect using JavaScript - @code.scientist x @codingtorque<span class="nt">




     class="container">
        
Hi! I'm Piyush Patil

        
 style="display: flex; align-items: center;">
             id="designation">

Output Till Now

Image description

continue reading

Total
1
Shares
Share 1
Tweet 0
Pin it 0
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
how-to-get-buy-in-for-your-seo-projects-โ€”-whiteboard-friday

How to Get Buy-In for Your SEO Projects โ€” Whiteboard Friday

October 15, 2022
Next Post
waiting-for-the-dom-to-be-ready-in-javascript

Waiting for the DOM to be ready in Javascript

October 15, 2022
Related Posts