Home Web Development JavaScript Auto Type In JavaScript | Animated Typing Effect In Pure JS

Auto Type In JavaScript | Animated Typing Effect In Pure JS

April 24, 2019

11576

How to create an Animated Typing Effect In Pure JS? In short, create Auto Type In JavaScript.

You must have seen auto type effect on some websites. They use this to show their quality & uniqueness. A perfect and funny example of auto-typing is: In hacking movies, a hacker just click one button then many lines of code appear. The similar thing happens when you run ping in CMD or apt-get update in Linux terminal. This effect is not 100% the same but its very close.

So, Today I am sharing an animated typing effect in pure javascript. There are no JQuery or any JavaScript framework used, but I used an external CSS library. This auto type in javascript will be perfect in your website’s banner to introduce. Mostly this type of program uses in any kind of service provider websites.

If you are using a banner slider for only showing text, then you can use this simple program. Because it has less code and light in size. If you don’t get the program yet, I am talking about. Then let’s see a preview to know what is program actually is or how it looks like.

Preview Of Animated Typing Effect In Pure JS

First, see this video preview of getting an idea about this program.

https://webdevtrick.com/wp-content/uploads/auto-typing-effect-javascript.mp4?_=1

Now you can clearly see this program visually with the help of this video preview. If you like this then go for source code given below.

Auto Type In JavaScript Programs Source Code

First, talk a little bit about the program. This auto type program is in pure javascript. I used a google font and an external CSS library called normalize ( get info ). There is very less code in HTML and CSS file, mostly used javascript.

You have to create 3 files for this program. One for HTML, One for CSS, & One for JavaScript.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>Auto Type</title>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

      <link rel="stylesheet" href="style.css">

</head>

<body>

  <section class="pen">
<h1 class="text">Webdevtrick.com Is
  <span
     class="txt-rotate"
     data-period="2000"
     data-rotate='[ "Awesome.", "Amezing.", "Very Informative.", "Source Code Sharing Blog.", "Great!" ]'></span>
</h1>
</section>

    <script  src="function.js"></script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1 class="text">Webdevtrick.com Is

<span

class="txt-rotate"

data-period="2000"

data-rotate='[ "Awesome.", "Amezing.", "Very Informative.", "Source Code Sharing Blog.", "Great!" ]'></span>

</h1>

</section>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/** code by webdevtrick ( https://webdevtrick.com ) **/
body {
	background-color: #31A9F5;
}
.pen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  height: 100vh;
}
.text {
  color: whitesmoke;
  font-family: 'Roboto', sans-serif;
  padding: 1em 2em;
  text-align: center;
  font-size: 3.5em;
}

/** code by webdevtrick ( https://webdevtrick.com ) **/

body {

background-color: #31A9F5;

}

.pen {

display: flex;

flex-direction: column;

justify-content: center;

align-content: center;

height: 100vh;

}

.text {

color: whitesmoke;

font-family: 'Roboto', sans-serif;

padding: 1em 2em;

text-align: center;

font-size: 3.5em;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes given below.

/** code by webdevtrick ( https://webdevtrick.com ) **/
var TxtRotate = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

  var that = this;
  var delta = 300 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
  document.body.appendChild(css);
};

/** code by webdevtrick ( https://webdevtrick.com ) **/

var TxtRotate = function(el, toRotate, period) {

this.toRotate = toRotate;

this.el = el;

this.loopNum = 0;

this.period = parseInt(period, 10) || 2000;

this.txt = '';

this.tick();

this.isDeleting = false;

};

TxtRotate.prototype.tick = function() {

var i = this.loopNum % this.toRotate.length;

var fullTxt = this.toRotate[i];

if (this.isDeleting) {

this.txt = fullTxt.substring(0, this.txt.length - 1);

} else {

this.txt = fullTxt.substring(0, this.txt.length + 1);

}

this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

var that = this;

var delta = 300 - Math.random() * 100;

if (this.isDeleting) { delta /= 2; }

if (!this.isDeleting && this.txt === fullTxt) {

delta = this.period;

this.isDeleting = true;

} else if (this.isDeleting && this.txt === '') {

this.isDeleting = false;

this.loopNum++;

delta = 500;

}

setTimeout(function() {

that.tick();

}, delta);

};

window.onload = function() {

var elements = document.getElementsByClassName('txt-rotate');

for (var i=0; i<elements.length; i++) {

var toRotate = elements[i].getAttribute('data-rotate');

var period = elements[i].getAttribute('data-period');

if (toRotate) {

new TxtRotate(elements[i], JSON.parse(toRotate), period);

}

// INJECT CSS

var css = document.createElement("style");

css.type = "text/css";

css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";

document.body.appendChild(css);

};

That’s It. Now you have successfully created auto type in JavaScript program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

3 COMMENTS

Brian August 30, 2019 At 7:18 pm

How do you make it type and delete faster but with a pause before deleting?

Reply
- Brian August 30, 2019 At 7:45 pm
  
  Also, is it possible to stop the continuous loop?
  
  Reply
CWhite January 15, 2021 At 2:22 am

Any way to delay the start of this typing? Like a few seconds after the home page of a website loads?
Thanks

Reply

Auto Type In JavaScript | Animated Typing Effect In Pure JS

Preview Of Animated Typing Effect In Pure JS

Auto Type In JavaScript Programs Source Code

3 COMMENTS

LEAVE A REPLY

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY

Preview Of Animated Typing Effect In Pure JS

Auto Type In JavaScript Programs Source Code

3 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY

LEAVE A REPLY