Home > javascript > typing effect > Implementing a Dynamic Typing Effect Using JavaScript

Implementing a Dynamic Typing Effect Using JavaScript

October 22, 2023 ,

Implementing a Dynamic Typing Effect Using JS






Dynamic typing effects are a popular web design technique that mimics the look of text in real time. It can be used to create a variety of effects, such as displaying introductions on the landing page, animating headlines, or interactive text. There are a few different ways to implement dynamic typing effects in JS, but the most common way is to use a JavaScript library. One of the most popular libraries for this is Typed.js. To use Typed.js to apply a dynamic typing effect, you will first need to add the library to your project. You can do this by downloading the library from the Typed.js web page or by using a CDN. Once you have added the library, you can start by assigning an ID to the element to which you want to apply the typing effect. You will also need to provide the types of strings you want to write.


See Demo:






To Create effect like above  we have add js in html code which is given below:


Full code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Untoldcoding</title>
    <link
      href="https://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise"
      rel="stylesheet"
      type="text/css"
    />
    <style>
      body {
        font-family: "Waiting for the Sunrise", cursive;
        font-size: 30px;
        margin: 10px 50px;
        letter-spacing: 6px;
        font-weight: bold;
        background: black;
        color: white;
        background-image: url(./1.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="typedtext"></div>

    <audio controls autoplay>
      <source src="my.mp3" type="audio/mpeg" />
    </audio>
    <script>
      var aText = new Array(
        "जय हनुमान ज्ञान गुन सागर। जय कपीस तिहुं लोक उजागर।।",
        "राम दूत अतुलित बल धामा। अंजनि-पुत्र पवनसुत नामा।।",
        "महाबीर बिक्रम बजरंगी। कुमति निवार सुमति के संगी।।",
        "कंचन बरन बिराज सुबेसा। कानन कुण्डल कुँचित केसा।।",
        "हाथ बज्र औ ध्वजा बिराजे। कांधे मूंज जनेउ साजे।।",
        "शंकर सुवन केसरी नंदन। तेज प्रताप महा जग वंदन।।",
        "बिद्यावान गुनी अति चातुर। राम काज करिबे को आतुर।।",
        "प्रभु चरित्र सुनिबे को रसिया। राम लखन सीता मन बसिया।।",
        "सूक्ष्म रूप धरि सियहिं दिखावा। बिकट रूप धरि लंक जरावा।।",
        "भीम रूप धरि असुर संहारे। रामचन्द्र के काज संवारे।।",
        "लाय सजीवन लखन जियाये। श्री रघुबीर हरषि उर लाये।।",
        "रघुपति कीन्ही बहुत बड़ाई। तुम मम प्रिय भरतहि सम भाई।।",
        "सहस बदन तुम्हरो जस गावैं। अस कहि श्रीपति कण्ठ लगावैं।।",
        "सनकादिक ब्रह्मादि मुनीसा। नारद सारद सहित अहीसा।।",
        "जम कुबेर दिगपाल जहां ते। कबि कोबिद कहि सके कहां ते।।",
        "                           ",
        "तुम उपकार सुग्रीवहिं कीन्हा। राम मिलाय राज पद दीन्हा।।",
        "तुम्हरो मंत्र बिभीषन माना। लंकेश्वर भए सब जग जाना।।",
        "जुग सहस्र जोजन पर भानु। लील्यो ताहि मधुर फल जानू।।",
        "प्रभु मुद्रिका मेलि मुख माहीं। जलधि लांघि गये अचरज नाहीं।।",
        "दुर्गम काज जगत के जेते। सुगम अनुग्रह तुम्हरे तेते।।"
      );
      var iSpeed = 58; // time delay of print out
      var iIndex = 0; // start printing array at this posision
      var iArrLength = aText[0].length; // the length of the text array
      var iScrollAt = 4; // start scrolling up at this many lines

      var iTextPos = 0; // initialise text position
      var sContents = ""; // initialise contents variable
      var iRow; // initialise current row

      function typewriter() {
        sContents = " ";
        iRow = Math.max(0, iIndex - iScrollAt);
        var destination = document.getElementById("typedtext");

        while (iRow < iIndex) {
          sContents += aText[iRow++] + "<br />";
        }
        destination.innerHTML =
          sContents + aText[iIndex].substring(0, iTextPos) + "_";
        if (iTextPos++ == iArrLength) {
          iTextPos = 0;
          iIndex++;
          if (iIndex != aText.length) {
            iArrLength = aText[iIndex].length;
            setTimeout("typewriter()", 500);
          }
        } else {
          setTimeout("typewriter()", iSpeed);
        }
      }

      typewriter();
    </script>
  </body>
</html>


See Live Demo :  Click here .

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.


FAQs (Frequently Asked Questions) on Implementing a Dynamic Typing Effect Using JavaScript

1. What is a Dynamic Typing Effect?

A Dynamic Typing Effect is a visual animation technique used to simulate the appearance of text being typed out in real-time. It creates the illusion of characters being gradually revealed on the screen, one by one, as if someone were typing the text.

2. How does a Dynamic Typing Effect work?

The Dynamic Typing Effect is implemented using JavaScript to manipulate the text content of an HTML element. By selectively appending characters to the element's text content at timed intervals, it creates the appearance of typing. CSS can also be used to style the text and add additional visual effects.

3. What are the key components required to implement a Dynamic Typing Effect?

To implement a Dynamic Typing Effect, you'll need:

  • HTML structure: Defines the container element where the typed text will be displayed.
  • CSS styling: Specifies the visual appearance of the text, including fonts, colors, and spacing.
  • JavaScript logic: Controls the typing animation by selectively appending characters to the text content at specified intervals.
  • Optional: CSS animations or transitions can be used to add additional visual effects, such as blinking cursor or text fade-in.

4. Can a Dynamic Typing Effect be applied to any HTML element?

Yes, a Dynamic Typing Effect can be applied to any HTML element that can contain text content, such as <div>, <span>, or <p>. You can choose the most appropriate element based on your design requirements and the context in which the typing effect will be used.

5. Is JavaScript the only way to implement a Dynamic Typing Effect?

While JavaScript is commonly used to implement Dynamic Typing Effects due to its ability to manipulate the DOM (Document Object Model) dynamically, other technologies such as CSS animations or transitions can also be used to achieve similar effects, albeit with more limited capabilities.

6. How customizable is the Dynamic Typing Effect?

The Dynamic Typing Effect is highly customizable, allowing designers to control various aspects of the typing animation, including typing speed, cursor appearance, text formatting, and additional visual effects. By adjusting parameters in the JavaScript code and CSS styles, you can tailor the typing effect to suit your design preferences.

7. Are there any performance considerations when implementing a Dynamic Typing Effect?

While the Dynamic Typing Effect itself is relatively lightweight, excessive use of JavaScript timers or inefficient DOM manipulation can impact performance, especially on older devices or browsers. Optimize your code to minimize unnecessary computations and ensure smooth rendering across different platforms.

8. Can the Dynamic Typing Effect be combined with other animations or interactive elements?

Yes, the Dynamic Typing Effect can be combined with other animations, transitions, or interactive elements to create more engaging user experiences. For example, you can synchronize the typing animation with other on-screen elements or trigger additional actions when the typing completes.

9. Are there any libraries or plugins available for implementing a Dynamic Typing Effect?

Yes, there are several JavaScript libraries and plugins available that provide pre-built solutions for implementing Dynamic Typing Effects with varying levels of customization and features. Examples include Typed.js, TypewriterJS, and SimpleTyping.

10. Where can I find resources or tutorials for implementing a Dynamic Typing Effect?

You can find numerous tutorials, code examples, and resources online that demonstrate how to implement a Dynamic Typing Effect using JavaScript, CSS, and HTML. These resources often provide step-by-step instructions, code snippets, and live demos to help you understand and implement the effect in your own projects.


Post a Comment

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.