CODEWITHSUNDEEP
javascript
Josh
Josh

Reputation: 314

Typing effect for a single element

I want to create a typing effect but for only a single element like<p>, not for the entire body of the page, this code snippet works perfectly, but it creates the effect for the entire page, I don't know Javascript.

var str = document.body.innerHTML.toString();
var i = 0;
document.body.innerHTML = "";

setTimeout(function() {
    var se = setInterval(function() {
        i++;
        document.body.innerHTML = str.slice(0, i) + "|";
        if (i == str.length) {
            clearInterval(se);
            document.body.innerHTML = str;
        }
    }, 10);
});

Thanks for any help you could provide.

Upvotes: 2

Views: 90

Answers (3)

Shakiba Moshiri
Shakiba Moshiri

Reputation: 23794

You just need getElementById and two spans, and for making it a little bit real, an animation for simulating the cursor.

Her is a more advanced code if you liked.

let span = document.getElementById( 'typewriter')

const text = 'How are you today?';
const length = text.length;
span.innerText = '';
let index = 0;
let se = setInterval(function() {
    span.innerText = text.slice(0, index);
    if (index++ == text.length) {
        clearInterval(se);
        span.innerText = text.slice(0, index);
    }
}, 100); 
#cursor {
  white-space: pre;
  background-color: #f00;
  animation-name: cursor;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0, 1, 0, 1);
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}
@keyframes cursor {
   0% {     opacity: 1; }
  50% {     opacity: 0; }
  100% {     opacity: 1; }
 }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <span id='typewriter'></span>
  <span id='cursor'>_</span>
</body>
</html>

Upvotes: 1

Malaji Nagaraju
Malaji Nagaraju

Reputation: 151

First add ID attribute for elements which requires typing effect.

var str = document.getElementById("heading").innerHTML.toString();
var i = 0;
document.getElementById("heading").innerHTML = "";

setTimeout(function() {
    var se = setInterval(function() {
        i++;
        document.getElementById("heading").innerHTML = str.slice(0, i) + "|";
        if (i == str.length) {
            clearInterval(se);
            document.getElementById("heading").innerHTML = str;
        }
    }, 10);
});
<html>
<body>

Text without typing effect

<p id="heading">Text with typing effect</p>
</body>
</html>

Upvotes: 2

jonatjano
jonatjano

Reputation: 3738

you made almost all the work, what you miss is that you have to select the element you want to modify :

  1. create a <p> (or any other tag, there's no limit)
  2. add an id to the tag
  3. in your js select the tag with document.getElementById()
  4. replace every instance of document.body from your snippet to the selected element

I removed the setTimeout as it gived nothing imo, feel free to add it back if your situation needs it I remplaced vars by lets as vars can sometime gives unexpected results on bigger scripts

const element = document.getElementById("typed")

let str = element.innerHTML;
let i = 0;
element.innerHTML = "";


let se = setInterval(function() {
    i++;
    element.innerHTML = str.slice(0, i) + "|";
    if (i == str.length) {
        clearInterval(se);
        element.innerHTML = str;
    }
}, 100); 
// I slowed the interval to make it more visible it only type the center element
text shown everytime
<p id="typed">
this text will be typed
</p>
this text shown everytime too

this second snippet allow you to have multiple typed message in the same page if needed 

const elements = document.getElementsByClassName("typed")

Array.from(elements).forEach(el => {
  let str = el.innerHTML;
  let i = 0;
  el.innerHTML = "";
  
  let se = setInterval(function() {
      i++;
      el.innerHTML = str.slice(0, i) + "|";
      if (i == str.length) {
          clearInterval(se);
          el.innerHTML = str;
      }
  }, 100);
})
text shown everytime
<p class="typed">
this text will be typed
</p>
this text shown everytime too
<p class="typed">
this text will be typed too
</p>

Upvotes: 2

Related Questions