Animated Typewriter text effect using JQuery

Animated Typewriter text effect


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:




ADD CSS:




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.

3 Comments

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

  1. Nice & Easy. Keep Posting these kinda good content. bless you.

    ReplyDelete

Post a Comment

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

Post a Comment

Previous Post Next Post