Amazing Typing Effect using typed.js - Coding Torque

byPiyush Patil -
0
Amazing Typing Effect using Typed.js

Typing effect using typed.js

Hello Guys! In this blog, I'm going to explain to you how to make an amazing typing effect using Typed.js. We can use this in our landing pages for better impressions. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.

Let's cover the HTML part


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

<!-- Google Fonts  -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">


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

<div class="container">
    <h1>Hi! I'm Piyush Patil</h1>
    <h6 style="display: flex; align-items: center;">
        <p id="designation"></p>
    </h6>
</div>


Here is the Final HTML Code 

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Google Fonts  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">

    <title>Amazing Type Effect using JavaScript - @code.scientist x @codingtorque</title>
</head>


<body>
    <div class="container">
        <h1>Hi! I'm Piyush Patil</h1>
        <h6 style="display: flex; align-items: center;">
            <p id="designation"></p>
        </h6>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.0/typed.js"
        integrity="sha512-ioFpA4cD4gmoOhHglW4f6gep7w+YL7UMKtXx4ebJ5NN4SscmnZYYmSjkA+DaHGvBI4wpYVPx2C7DmmV9TgbIbQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

</body>

</html>

Output Till Now

Amazing Typing Effect using Typed.js

Let's understand CSS Part

In the below CSS code,

  1. We declare a * selectors to set the font Poppins that we have imported in our head tag.
  2. Next we declare a body selector which consists of styles for dark mode and aligns all elements in the body to the center.
  3. Next we have the container which has border-radius property for curve effect and padding property. 
* {
        margin: 0;
        padding: 0;
        font-family: 'Poppins', sans-serif;
    }
    
    body {
        background-color: #111827;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 10rem;
    }
    
    .container {
        border-radius: 10px;
        padding: 3rem 6rem;
        border: 2px solid white;
    }
    
    h6 {
        font-size: 1rem;
    }


Output Till Now


Amazing Typing Effect using Typed.js

Finally a JavaScript Part

The below javascript code is from official documentation of Typed.js library. 

var options = {
        strings: ["A Fullstack Web Developer...", "A Content Creator...", "A Freelancer...", "A Blockchain Enthusiast..."],
        typeSpeed: 30,
        loop: false,
    }
    var typed = new Typed('#designation', options);



If you want me to code any project or post any specific post, feel free to DM me at IG @code.scientist or @codingtorque

 If you have any doubt or any project ideas feel free to Contact Us 

Hope you find this post helpful💖 

 Written by: Coding Torque | Piyush Patil 

 Follow us on Instagram for more projects like this👨‍💻 
Tags:

Post a Comment

Previous Post Next Post