Home Bootstrap How to Animated typing effect using typed js?

How to Animated typing effect using typed js?

by Shahriar Sagor

Today now in this post we will learn here How to make typing text effect by using jquery plugin in our website. So there are the several plugins available for the different task or effect etc. Sometimes we may need to give an animated typing effect as like as typewriter with the string for the good layout and also best gui effect. So, we can also do it by using code jquery. But if we are use jquery plugin then we can make this best and without any time wast. So, we need to create the typing text effect by using the typed.js plugin of jquery.

If we want to use typed js plugin then we need two js as listed in the bellow:

1) jquery.min.js

2) typed.min.js

Ok then we can simply use the typed plugin as like as bellow given example code:

$(function(){

    $(".write").typed({

        strings: ["Welcome to ItSolutionStuff.com!"],

    });

});

In the above code i will use the simple typed function and i will give you an array as argument, in the array argument i will just pass the “strings” parameter on that way i will give the string will be a typing effect.

So you can also pass the several with the other option key in the array for customize. We typing effect as like as bellow listed:

  • strings
  • stringsElement
  • typeSpeed
  • startDelay
  • backSpeed
  • shuffle
  • backDelay
  • loop
  • loopCount
  • showCursor
  • cursorChar
  • attr
  • contentType
  • callback
  • preStringTyped
  • onStringTyped
  • resetCallback
Example:
<!DOCTYPE html>
<html>
<head>
	<title>Animated typing effect using typed js</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/typed.js/1.1.4/typed.min.js"></script>
	<style type="text/css">
		.write{
			font-size: 22px;
		}
		.container{
			text-align: center;
		}
	</style>
</head>
<body>
<div class="container">
	<span class="write"></span>
</div>
<script type="text/javascript">
	$(function(){
        $(".write").typed({
            strings: ["Welcome to ItSolutionStuff.com!", "Thanks for visit"],
            typeSpeed: 1,
        });
    });
</script>
</body>
</html>

Read Also: How to implement infinite ajax scroll pagination in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like