Creating Typing like effect;

Question

I want to write a code, producing typing effect, as First H, then next moment A , next moment P, in continuity,
producing....onload - H
1 sec after - HA
1sec after - HAPPY
like this, am thinking to use getSeconds and comparing then document.write();
But didn't worked any idea

Answer 1

-line 5: num<str.length?document.write(str[num]):clearInterval(write);
//To understand this line you need to first know what a "Conditional (Ternary) Operator" is. Think of it like an "if else statement" in one line, it tests a condition and executes a code when that condition is true or false.

The basic syntax for this ternary operator is:
(condition)?true:false;

Now that you understand what a ternary operator is and what it does, you can now understand this line. So the condition that we're testing is:

(num<str.length)

This is pretty simple to understand, basically we're saying that while the "num" variable is less than the length of the string, it should keep executing the code that's "True" right? And what code did we say that should keep executing?

document.write(str[num])

So what does this code actually do? Well it will write only one character to the window and that character is specified by the "num" variable. So the first time it executes, "num" is 0 and the character that's indexed as 0 in the "str" variable is "H".

So now let's look at the last part of this line, "clearInterval(write)". This is what will execute when the condition (num<str.length) is False. What this function does is that it clears the Interval you defined. It stops it and you defined the setInterval function and assigned it to the "write" variable. So when this executes then the "write" variable has to be in the "clearInterval" argument, so that it knows which setInterval it should clear.

-line 6: num++
//This increases the num variable every time the anonymous function executes

-line 7: },1000);
//This line closes the anonymous function and the setInterval function, and also gives the second argument of the "setInterval" function, which is the number of milliseconds. 1000 milliseconds equals 1 second

-line 8: };
//Closes the anonymous function that's assigned to window.onload

Answer 2

Good CSS solution, but implement typed.js for a simple effect like this might be... not needed.

Use my code, change the "statement" variable with your phrase and the time inside the setInterval method.

If you want to know how it works, check the comments in the code:

https://code.sololearn.com/WnO1NGCFL4CV/?ref=app

Answer 3

Well first of all Ashish, I want you to know that you can learn all from the Sololearn Javascript course because that's where I learned it. It's always best to learn a language before trying to undestand complex codes like the one I posted here.

With that being said, let's get into this. I'll explain each line for you in detail as best as I can. Hope it all helps.

There are 8 lines in my code and here's what they all do:

-line 1: window.onload=function(){
//Assigns an "anonymous" function to window.onload, this just means that when the browser loads, this function will be executed

-line 2: var str="HAPPY";
//Declares a variable called "str" and assigns a string value (HAPPY) to it

-line 3: var num=0;
//Declares a variable called "num" and assigns an integer value of 0 to it. This is because strings starting index value is 0, we'll get to this soon.

-line 4: var write=setInterval(function (){
//Assigns a "setInterval" function to the variable "write" that's being declare at the same time. The "setInterval" function is a function that executes in intervals of a user-defined time (in milliseconds), until a "clearInterval" function is called to stop it. Meaning this function will run until you stop it and you can define after how many milliseconds it should keep executing.

The setInterval function takes two arguments, the function it should keep executing and the interval in milliseconds. The basic syntax looks like this:
setInterval(function,Interval);

Now that you understand that part, you can understand the remaining part of this line. The part "...setInterval(function (){" creates an anonymous function within that first argument of the setInterval function. This anonymous function is what will be executed until you tell it to stop.

..to be continued on next comment. Please wait before I'm finished before replying..

Answer 4

In my opinion @ASHISH PANDEY, javascript will always be the best option because you have more control over your output and with less coding. Copy the following in your JS and run:

window.onload=function (){
var str="HAPPY";
var num=0;
var write=setInterval(function (){
num<str.length?document.write(str[num]):clearInterval(write);
num++;
},1000);
}

Answer 5

I know this isn't JavaScript, but may be helpful to you. It involves nothing more than CSS. When I get a second, I'll see what I can figure out with JavaScript for you. Just adjust the time below to get the delay/speed you wish.

HTML:
<p class="line-1 anim-typewriter">Happy Birthday!</p>

CSS:
/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

/* Global */
html{
min-height: 100%;
overflow: hidden;
}
body{
height: calc(100vh - 8em);
padding: 4em;
color: rgba(255,255,255,.75);
font-family: 'Anonymous Pro', monospace;
background-color: rgb(25,25,25);
}
.line-1{
position: relative;
top: 50%;
width: 24em;
margin: 0 auto;
border-right: 2px solid rgba(255,255,255,.75);
font-size: 180%;
text-align: center;
white-space: nowrap;
overflow: hidden;
transform: translateY(-50%);
}

/* Animation */
.anim-typewriter{
animation: typewriter 4s steps(44) 1s 1 normal both,
blinkTextCursor 500ms steps(44) infinite normal;
}

@keyframes typewriter{
from{width: 0;}
to{width: 24em;}
}

@keyframes blinkTextCursor{
from{border-right-color: rgba(255,255,255,.75);}
to{border-right-color: transparent;}
}

Answer 6

So you don't need me to continue?

Answer 7

For that you need to watch a tutorial video unfortunately Ashish. The reason for this is because I coded my snake from scratch without tutorials or help, so my way might not be the sufficient way to code a snake game.

I found a very good tutorial video for you on youtube though, it's only 26 minutes long. It will explain in detail how to code the snake. https://youtu.be/AaGK-fj-BAM

Answer 8

https://code.sololearn.com/W06r9qV9cGp3/?ref=app

Answer 9

I want to continue

Answer 10

I want you to continue explain up u did in code

Answer 11

ok, well thanx for all, I 'll look there.

Answer 12

thanx Netkos Ent, but In CSS the code is already written, we are just using it by using the function name,

but I want to code typing effect or say typing speed code to under stand how it works..

Answer 13

Understood! :)

I didn't write this, but here is something similar that was written in JS. If it were myself, I would just read their code and learn from their example so you can understand how it's done. Hope it helps you.

http://www.mattboldt.com/demos/typed-js/

Answer 14

@Gavin Christians....hey Ur codes works , thanx for that, but am actually not getting the concept you use, can u explain a little bit

Answer 15

thanx @gravin christian, for explanation, and effortz u did,

I know basics but was unaware of setInterval Function,
thanx again

Answer 16

heart thanks to you@Gravin Christian, I saw ur profile and snake game, and one little help,

concept of snake game? in short,
1.) random events of food of snake and its position(candy)
2.) adding of size in snake,
3.) motion and direction change how?

Very very thankful for such nice explanation , just one more time.