Text Typing Animation – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Thu, 03 Aug 2023 07:14:55 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Create Text Typing Effect in HTML CSS and Vanilla JavaScript https://www.codingnepalweb.com/text-typing-effect-html-css-javascript/ https://www.codingnepalweb.com/text-typing-effect-html-css-javascript/#respond Thu, 03 Aug 2023 07:10:59 +0000 https://www.codingnepalweb.com/?p=5709 Create Text Typing Effect in HTML CSS and Vanilla JavaScript

Have you ever come across that cool text typing effect on different websites where the words appear as if they’re being typed out? If you’re a beginner web developer, you might wonder how to create such an eye-catching animation on your own. Well, it’s a simple yet impressive effect that can be achieved using just HTML, CSS, and JavaScript.

In this blog post, I’ll guide you through the steps of creating this text-typing animation using HTML, CSS, and Vanilla JavaScript. This means we don’t rely on any external JavaScript libraries like typed.js. So you’ll gain a deep understanding of how this type of typing animation is created and how you can apply your skills to real-world web projects.

In this typing animation, each letter of the word appears after the other, creating a typewriter effect. There is also a blinking caret animation at the end of the word to make the effect more attractive. To know more about what our typing text animation looks like, you can watch the given YouTube video.

Video Tutorial of Text Typing Effect HTML & JavaScript

If you enjoy learning through video tutorials, the above YouTube video is an excellent resource. In the video, I’ve explained each line of code and provided informative comments to make the process of creating your own text-typing animation beginner-friendly and easy to follow.

However, if you like reading blog posts or want a step-by-step guide for creating this effect, you can continue reading this post. By the end of this post, you’ll have your own customizable text typing effect that you can easily use on your other projects.

Steps to Create Text Typing Animation in HTML & JavaScript

To create a custom text typing effect using HTML, CSS, and vanilla JavaScript, follow these simple step-by-step instructions:

  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file. This code includes essential HTML markup with <h1> and <span> tags, which we’ll use for the typing effect. Currently, the <span> element is empty, but using JavaScript, we’ll dynamically add the custom typing word.

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Typing Text Effect | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Coding is <span></span></h1>
</body>
</html>

Next, add the following CSS codes to your style.css file to apply visual styling to your text like color, font, border, background, etc. Now, if you load the web page in your browser, you will see styled static text with blinking caret animation.

/* Importing Google font - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

body {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background: #1D1E23;
}

h1 {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
}

h1 span {
    color: #BD53ED;
    position: relative;
}

h1 span::before {
    content: "";
    height: 30px;
    width: 2px;
    position: absolute;
    top: 50%;
    right: -8px;
    background: #BD53ED;
    transform: translateY(-45%);
    animation: blink 0.7s infinite;
}

h1 span.stop-blinking::before {
    animation: none;
}

@keyframes blink {
    50% { opacity: 0 }
}

Finally, add the following JavaScript code to your script.js file. These scripts include different JavaScript functions, variables, methods, and others that are responsible for creating the text-typing effect.

const dynamicText = document.querySelector("h1 span");
const words = ["Love", "like Art", "the Future", "Everything"];

// Variables to track the position and deletion status of the word
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;

const typeEffect = () => {
    const currentWord = words[wordIndex];
    const currentChar = currentWord.substring(0, charIndex);
    dynamicText.textContent = currentChar;
    dynamicText.classList.add("stop-blinking");

    if (!isDeleting && charIndex < currentWord.length) {
        // If condition is true, type the next character
        charIndex++;
        setTimeout(typeEffect, 200);
    } else if (isDeleting && charIndex > 0) {
        // If condition is true, remove the previous character
        charIndex--;
        setTimeout(typeEffect, 100);
    } else {
        // If word is deleted then switch to the next word
        isDeleting = !isDeleting;
        dynamicText.classList.remove("stop-blinking");
        wordIndex = !isDeleting ? (wordIndex + 1) % words.length : wordIndex;
        setTimeout(typeEffect, 1200);
    }
}

typeEffect();

In the above code, you can see there is a “words” array that contains a list of phrases used for the typing animation, some global variables used to track typing status, and a function with an if/else condition to initiate the typing and erasing effects. To understand JavaScript code better, I recommend watching the above video tutorial, paying close attention to the code comments, and experimenting with the code.

Conclusion and Final words

In conclusion, creating a text typing animation is a valuable and useful web project. I believe that by following the steps outlined in this blog post, you’ve successfully created your own text-typing effect using HTML, CSS, and JavaScript.

To further improve your web development skills, I recommend you try recreating the same text-typing animation using only HTML and CSS. By creating this effect, you’ll gain a better understanding of how CSS properties and animations are used to create cool text typing effects.

If you encounter any problems while creating your text-typing effect, you can download the source code files for this project for free by clicking the Download button. You can also view a live demo of it by clicking the View Live button.

 

]]> https://www.codingnepalweb.com/text-typing-effect-html-css-javascript/feed/ 0 Multiple Typing Text Animation in HTML CSS & JavaScript https://www.codingnepalweb.com/multiple-typing-text-animation-javascript/ https://www.codingnepalweb.com/multiple-typing-text-animation-javascript/#respond Sun, 03 Apr 2022 21:11:19 +0000 https://www.codingnepalweb.com/?p=4183 Multiple Typing Text Animation in HTML CSS & JavaScript

Hello friend, hope you are doing awesome. Today in this blog you will learn to create Multiple Typing Text Animation using HTML CSS and JavaScript. I also have created a Website with Typing Text Effect.

Multiple typing text animation means the animation of the text that changes automatically like the typewriter effect. This typing text effect is going very famous nowadays. We can see this type of effect on website manly.

Let’s have a quick look at the given image of our project [Multiple Typing Text Animation]. In the image, we can see white text and blue text with the incomplete word. Actually, the with parts of the text will be constant and the blue part words will be animated with multiple texts.

To see the real demo of this multiple typing text animation and the HTML CSS and JavaScript code that I have used to create this project, you can watch the video tutorial of this project, which is given below.

Multiple Typing Text Animation using HTML CSS & JavaScript

I have provided all the HTML CSS and JavaScript code that I have used to create this multiple typing text animation. Before jumping into the source code files, you need to know some basic explanations of this given video tutorial.

As you have seen in the video tutorial on the multiple typing text animation using HTML CSS and JavaScript. On the screen, we have seen two types of text one is white-colored with constant features and another is blue-colored with an animated feature. Also, we have seen the blues portion text animated automatically with different text like a typewriter effect. To animate this text like a typewriter I have used CSS animation property and to change the text I have used some JavaScript.

I hope, now you can create this type of project [Multiple Typing Text Animation] easily, if you are feeling difficulty creating, I have provided all the source code below.

You Might Like This:

Multiple Typing Text [Source Code]

To get the following HTML CSS and JavaScript code for the Multiple Typing Text Animation, you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

  

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <!----======== CSS ======== -->
    <link rel="stylesheet" href="style.css">
    <!--<title>Typing Text Animation</title>-->
</head>
<body>
    <div class="container">
        <span class="text first-text">I'm a</span>
        <span class="text sec-text">Freelancer</span>
    </div>

    <script>
        const text = document.querySelector(".sec-text");

        const textLoad = () => {
            setTimeout(() => {
                text.textContent = "Freelancer";
            }, 0);
            setTimeout(() => {
                text.textContent = "Blogger";
            }, 4000);
            setTimeout(() => {
                text.textContent = "YouTuber";
            }, 8000); //1s = 1000 milliseconds
        }

        textLoad();
        setInterval(textLoad, 12000);
    </script>    
</body>
</html>

/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #010718;
    overflow: hidden;
}
.container{
    width: 246px;
    overflow: hidden;
}
.container .text{
    position: relative;
    color: #4070F4;
    font-size: 30px;
    font-weight: 600;
}
.container .text.first-text{
    color: #FFF;
}
.text.sec-text:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #010718;
    border-left: 2px solid #4070F4;
    animation: animate 4s steps(12) infinite;
}
@keyframes animate{
    40%, 60%{
        left: calc(100% + 4px);
    }
    100%{
        left: 0%;
    }
}

 

 

]]> https://www.codingnepalweb.com/multiple-typing-text-animation-javascript/feed/ 0 Text Typing Animation using only HTML & CSS https://www.codingnepalweb.com/text-typing-animation-using-only-html-css/ https://www.codingnepalweb.com/text-typing-animation-using-only-html-css/#comments Fri, 26 Feb 2021 11:57:00 +0000 Text Typing Animation using only HTML & CSS
 
Hey friends, today in this blog you’ll learn how to create a Simple Text Typing Animation using only HTML & CSS or Typewriter Text Animation. Earlier I have shared a blog on Colorful Gradient Text Effect using HTML & CSS and now I’m going to create pure CSS text typing animation.

You may have seen this type of text typing animation on many portfolio sites or other sites. Generally, this animation is created using JavaScript or jQuery library, and the famous jQuery library for text animation is typed.js but now I’ll tell you how you can create this text typing animation using only HTML & CSS.

In this text animation, there are two types of texts that mean one is a static text which has no animation, and the second one has animation and it changes dynamically. I have added four different texts to this animation and it’s shown one by one with a typing animation which looks pretty cool and interesting.
 
You can watch a demo of this text animation or a full video tutorial which may help you to clear your doubts related to this animation.

Video Tutorial of Text Typing Animation

 
In the video, you have seen how I created this text animation using only HTML & CSS and I believe if you’re a beginner then you can also understand these codes and can create this type of text animation. I used the CSS @keyframes property to create typing animation of texts and without this property, this animation can’t be completed.

If you like this animation can thinking about using it on your projects then you can download or copy codes from the given boxes and feel free to use these codes on your projects without any limitation. In this video, I didn’t show you how you can erase back to typed text but many viewers have wanted it so I and this animation also and updated the codes.

You might like this:

Pure CSS Text Typing Animation [Source Codes]

To create this program [Typewriter Text Animation]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this text animation from the below download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Multiple Texts Typing Animation | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
    <div class="static-txt">I'm a</div>
    <ul class="dynamic-txts">
      <li><span>YouTuber</span></li>
      <li><span>Designer</span></li>
      <li><span>Developer</span></li>
      <li><span>Freelancer</span></li>
    </ul>
  </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #343F4F;
}
.wrapper{
  display: flex;
}
.wrapper .static-txt{
  color: #fff;
  font-size: 60px;
  font-weight: 400;
}
.wrapper .dynamic-txts{
  margin-left: 15px;
  height: 90px;
  line-height: 90px;
  overflow: hidden;
}
.dynamic-txts li{
  list-style: none;
  color: #FC6D6D;
  font-size: 60px;
  font-weight: 500;
  position: relative;
  top: 0;
  animation: slide 12s steps(4) infinite;
}
@keyframes slide {
  100%{
    top: -360px;
  }
}
.dynamic-txts li span{
  position: relative;
  margin: 5px 0;
  line-height: 90px;
}
.dynamic-txts li span::after{
  content: "";
  position: absolute;
  left: 0;
  height: 100%;
  width: 100%;
  background: #343F4F;
  border-left: 2px solid #FC6D6D;
  animation: typing 3s steps(10) infinite;
}
@keyframes typing {
  40%, 60%{
    left: calc(100% + 30px);
  }
  100%{
    left: 0;
  }
}

That’s all, now you’ve successfully created a Text Typing Animation using only HTML & CSS. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

]]> https://www.codingnepalweb.com/text-typing-animation-using-only-html-css/feed/ 13