Amazing Typing Effect using typed.js - Coding Torque

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 🚀.

Before we start, here are some more JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

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>

CSS Code

Create a file style.css and paste the code below.

* {
        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

JavaScript Code

Create a file script.js and paste the code below.

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);

Written by: Piyush Patil

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

Hope you find this post helpful💖