Animated Typewriter text effect using JQuery

byCodingFlicks -July 25, 2020

3

This blog is about animated typewriter text effect. Currently, all reputable organizations maintain a website that helps them compete with their competing organizations. For this, they run a good quality website that has various features, including animation. Adding a little animation to a website makes it much more visually appealing than an average site and also attracts a lot of visitors. One of these animations is text animation, that is, showing different text effects in different parts of the website.

Today we will create a snippet with a plugin for typing text animation in this tutorial. There is another plugin called typed.js. But we will be using the typer js plugin here. This plugin can be used very quickly on any website. We will show you an example of how to use this plugin on a website and create an animated typewriter effect. You can watch the video tutorial below where we have shown how to implement the plugin and code this snippet.

Video Tutorial:

To use this plugin, first, go to typer js plugin and download the plugin. After extracting the file, from there, copy the typer.min.js file and attach it to your HTML file. If you want to use this plugin, you must need the latest jquery, so add the jquery file as well. Plugin initialization requires a small js code for which I have taken a custom js file where I will paste the code of initialization. This file also needs to be included at the bottom of the HTML.

You May also like:

This Snippet's HTML markup is straightforward. Here I have taken a simple div named box in which I have taken an H2 tag and used a random person's name in it. Then we have taken an H1 tag called example and this ID we will use to create our text animations.

Now let's make the CSS mark up quickly. First, we will give a background image to the body, and then we will provide a custom width to the div named box. Later we will try to bring it to the middle by giving 200 pixels above and below and auto margin on both sides. I have used Lato font in this snippet. You can use your fonts on your website. After giving some basic style to the h2 tag, we will go to the plugin website, copy the initiating js code, and paste our custom js file. The strings in this code are the type of text that is the type of words you want to animate. For this tutorial, I have written I am a Model, I'm a designer, I'm a Photographer. You can write the text according to your needs. Here are some more settings that you can configure, such as typespeed, backspacespeed, autostart, startdelay, etc. For example, we have taken 60 typespeed for this tutorial because, with the 100 typedspeed given on the website, the text is typing faster. The higher the value of typespeed here, the slower the typing animation of the text. By changing the value of these, you can create a typing text animation effect for your website's homepage. After the animation is activated, we will do some styling of the h1 tag that the animation enabled, such as changing the color, giving margins, etc.

Animated Typewriter text effect [Source Codes]

To make this effect, you need to create three files: an HTML file, a CSS file, and a custom js file. Consequently, you need to copy the HTML, CSS, and js code below and paste them to the appropriate files, and save them. If you are having trouble with the code below, you can download it from the download button below this article.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<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">
    <title>Animated Typewriter text effect using JQuery</title>
    <link rel="stylesheet" href="style.css">    
</head>
<body>
    <div class="box">
        <h2>Laura Thorn</h2>
        <h1 id="example"></h1>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="typer.min.js"></script>
    
    <script>
        $("#example").typer({
            strings: ["I'm a Model", "I'm a Designer", "I'm a Photographer"],
            typeSpeed: 200,
            backspaceSpeed: 20,
            backspaceDelay: 800,
            repeatDelay: 1000,
            repeat: true,
            autoStart: true,
            startDelay: 100,
        });

    </script>
  
</body>
</html>

ADD CSS:

body {
	background-image: url(img/1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.box {
	width: 700px;
	margin: 240px auto;
	font-size: 30px;
	font-weight: bold;
	font-family: lato;
	text-align: center;
}
.typed {
	color: #fff;
}
.box h2 {
	font-size: 80px;
	color: #fff;
	margin: 0;
	font-family: lato;
	font-weight: 900;
	text-transform: uppercase;
}
#example {
	margin: 0;
	color: #fff;
}

Hope this animated typewriter effect code helps. Our homepage has a load more button at the bottom of it. You can get more such code samples. Thank you for visiting our site.

DOWNLOAD CODE

3 Comments

Please do not enter any spam link in the comment box.

Adeola3 August 2020 at 10:39
Nice & Easy. Keep Posting these kinda good content. bless you.
ReplyDelete
Replies
CodingFlicks3 August 2020 at 10:44
Thanks for visiting the blog
ReplyDelete
Replies
Emir Şiriner16 November 2020 at 00:34
Thanks for share. Very nice...
ReplyDelete
Replies

Add comment