Typing Animation

Source Code of Typing Animation

Folder Structure

Typing Animation

Prerequisite Sites


Typing Animation



<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jai Shri Ram | Cosas Learning</title>
    <!---------------  Importing the CSS file  --------------------->
    <link rel="stylesheet" href="style.css">
    <div class="container">
        <div class="image">
        <div class="text">
            <h1><span class="input"></span></h1>
   <!---------------  CDN of Typing Animation JavaScript file  --------------------->
   <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>     
   <!---------------  Importing the JavaScript file  --------------------->
   <script src="script.js"></script>  


/*-----------------  GOOGLE FONTS  -----------------*/
@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap');

/*-----------------  VARIABLES  -----------------*/
:root {
    /* Colors */ 
    --white_color: rgb(255, 255, 255);
    --Keshri_color: rgb(255, 153, 51);
/*-----------------  Base  -----------------*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'PT Serif', serif;
    color: var(--white_color);
/*-----------------  Styling Start  -----------------*/
.container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--Keshri_color);
.image {
    width: 30rem;
    height: 30rem;
    background-color: var(--white_color);
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('images/Shri-ram-1.png');
    border-radius: 1rem;
    transition: 3s;
    margin-bottom: 1rem;
    cursor: pointer;
.image:hover {
    background-image: url('images/Shri-ram-2.png');


/* --------------- Typing Animations  --------------------- */
var typed = new Typed(".input", {
    strings: ["राम सिया राम सिया राम,", "जय जय राम,", "राम सिया राम सिया राम,", "जय जय राम॥"],
    backSpeed: 100,
    loop: true

YouTube Video

Download Source Code

Leave a Comment

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