How to do the machine effect in a text using JavaScript

In this post you will learn how to do the machine effect in a text using JavaScript: you will get a code which will do it INCREDIBLY. ENTERS!

 

WE START:

Welcome to another post.

Today we will talk about JavaScript, and it is that it crossed our mind to provide you with a code that is capable of making the machine effect in a text.

But let's not go too far, if you are still not very clear about what this effect is, do not worry, we will explain!

What is the machine effect?

The machine effect is an effect that can be done in various programming languages to interpret that the text is being written at that moment.

When you write content, the texts appear as you press the keys, right? Well that's the actual machine!

You configure a text and passing it through JavaScript, you can do this incredible effect.

How to do the machine effect in a text using JavaScript

First we create a div with an id (it will be the one that JavaScript will use to do that):

<div id="efecto"></div>

Now, copy this code and edit it according to what we will specify below on this page:

var mensaje = "This is a test", pause = 200; function start () {var i = 0; var m = message.split (''); var t = setInterval (function () {if (i> = m.length-1) clearInterval (t); document.getElementById ('effect') .innerHTML + = m [i]; i ++; }, pause); } window.onload = start;

What is in bold, underlined and italicized, is what we can change to customize it:

• Change "effect" by the id of the div where we want the effect to be seen.
• We change "This is a test" for the message we want to print.
• Change “200” for the waiting time between each letter (in thousandths of a second [ex: 1000 = 1 second, 500 = 0.5 seconds, etc]).

And if we try it, we will see that it looks like a typewriter effect like "This is a test" has.

SEE PROOF THAT WE MADE WITH THIS CODE

Improve the machine effect using CSS

If you want to do the machine effect in a text using more advanced JavaScript and involving the CSS design language, I recommend you watch this video:

---

Before finishing this post, I would like to tell you that in this blog you will find more useful content for programmers: scripts, help, tips, programs, etc ... Visit us!

In the same way, we write tech tutorials of all kinds: gaming, software, hardware, networks, programming, etc, etc ... Surely there will be something that interests you to see!

How did you like this machine effect in a text using JavaScript? Let us know via the comment box (below this post)!

We do not see in another article.