How to Style Typing Animation in Javascript

Question

I was wondering if there was any way to make the typing text come in as different font sizes. I have attached a jsfiddle that shows what I have done so far. Is there a way to assign a class to each sentence?

Thank you!

https://jsfiddle.net/te4fo7fh/embedded/result/

var tt_element = document.getElementById("tt_element");
var tt_text = "It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^And this one came in 30pt font size.";
var tt_array = tt_text.split("");
var tt_timer;
var tt_loop = true;
var tt_speed = 70;
var tt_delay = 3000;
var tt_br = "^";

function typeMyText() {
  if (tt_array.length > 0) {
    if (tt_array[0] == tt_br) {
      tt_element.innerHTML += "<br>";
      tt_array.shift();
    } else {
      tt_element.innerHTML += tt_array.shift();
    }
  } else {
    clearTimeout(tt_timer);
    if (tt_loop) {
      setTimeout(clearMyText, tt_delay);
    }
    return false;
  }
  tt_timer = setTimeout(typeMyText, tt_speed);
}

typeMyText();

#tt_element {
  padding-top: 20px;
	line-height:1.5em;
  font-size: 12pt;
  font-family: Georgia;
}

<section class="editable" contenteditable="true">
  <p id="tt_element" class="blue"></p>
</section>

Can you specify how do you want to be the font size controlled? Something like in wysiwyg editors? — Justas
– Justas, Commented Dec 20, 2015 at 10:38
Yes, I want to be able to manually control what font size each sentence is. Thank you! — Nicole Davis
– Nicole Davis, Commented Dec 20, 2015 at 10:41

RodrigoDela · Accepted Answer · 2015-12-20 11:07:44Z

1

I updated your example.

First of all you type the wished fontSize into your string like your breaks.

var tt_text = "It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^{30}And this one came in 30pt font size.";

After that you put every line into a single span.

var tt_line = document.createElement('span');
tt_element.appendChild(tt_line);

Once you've done that you still need to recognize the fontSize change:

if (tt_array[0] == '{') {
    var index = 0;
    var fontSize = '';
    tt_array.shift() // To skip {
    // Loop to get the size between the {}
    while (tt_array[index] !== '}') {
       fontSize += tt_array[index];
       tt_array.shift()
    }
    tt_array.shift() // To skip }
    tt_line.style.fontSize = fontSize+'px';
  }

See the fiddle here: https://jsfiddle.net/te4fo7fh/1/

answered Dec 20, 2015 at 11:07

RodrigoDela

1,73613 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nicole Davis Over a year ago

I had another question how would you change the line height along with the font size?

RodrigoDela Over a year ago

To the same as the font-size? Just add tt_line.style.lineHeight = fontSize+'px'; Otherwise you would nee to parse it again.

J-B · Accepted Answer · 2015-12-21 11:10:33Z

1

You could replace tt_text by an array of objects, which embed style information (tt_text_with_style in my example).

var tt_element = document.getElementById("tt_element");
var tt_current_element;
var tt_array = [];
var tt_text_with_style = [
  {size: '12pt', lineHeight: '25pt', txt: 'It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.^^'},
  {size: '30pt', lineHeight: '35pt',  txt: 'And this one came in 30pt font size.'}];
var tt_timer;
var tt_loop = false;
var tt_speed = 7;
var tt_delay = 3000;
var tt_br = "^";
var i = 0;
var current_line


function styleMyText() {
  var style = 'font-size: ' + current_line.size + ';line-height: ' + current_line.lineHeight
  tt_current_element = document.createElement('span')
  tt_current_element.setAttribute('style', style)
  tt_element.appendChild(tt_current_element)
}

function clearMyText() {
  tt_element.innerHTML = ''
  tt_array = []
  i = 0;
  typeMyText()
}

function typeMyText() {
  if (tt_array.length === 0) {
    current_line = tt_text_with_style[i++]
    if (!current_line) {
      clearTimeout(tt_timer);
      if (tt_loop) {
        setTimeout(clearMyText, tt_delay);
      }
      return false  
    }
    current_style = current_line.size
    tt_array = current_line.txt.split('')
    styleMyText()
  }
  
  if (tt_array[0] == tt_br) {
    tt_current_element.innerHTML += "<br>";
    tt_array.shift();
  } else {
    tt_current_element.innerHTML += tt_array.shift();
  }

  tt_timer = setTimeout(typeMyText, tt_speed);
}



typeMyText();

#tt_element {
  padding-top: 20px;
  line-height:1.5em;
  font-size: 12pt;
  font-family: Georgia;
}

.blue ::selection {
  background: red;
}

<section class="editable" contenteditable="true">
  <p id="tt_element" class="blue"></p>
</section>

edited Dec 21, 2015 at 11:10

answered Dec 20, 2015 at 11:43

J-B

1,0561 gold badge11 silver badges14 bronze badges

5 Comments

Nicole Davis Over a year ago

Thank you so much this was so helpful, I had another question how would you change the line height along with the font size?

J-B Over a year ago

I updated my snippet to change the line height. But if you have further styling issues, you should use classes and something like tt_current_element.classList.add(current_line.className)

Nicole Davis Over a year ago

Wow... so helpful. Thank you! One last question, I added a CSS class of blue to make the selection a blue highlight (.blue::selection { background: blue; color:white; }) but it does not implement on the tt_element is there a reason why?

J-B Over a year ago

I edited the snippet (I chose a red background because by default it's blue on my browser). Maybe you tried something like .blue::selection instead of .blue ::selection which enables you to target also children elements we've created inside tt_element.

Nicole Davis Over a year ago

That worked! Wow. Thank you! So sorry but one more question, Is there anyway that the first sentence would print "{'It would be great if this sentence came in 12pt fontsize.^with the typing effect being editable.}" and then it would clear after 5 seconds and the next sentence would show and type out?

Bhavin Solanki · Accepted Answer · 2015-12-20 10:46:58Z

-1

I think you have use Typed.js Which has many options to play with. Here is link for that : Type.js

Here is some example code with this js :

<script src="jquery.js"></script>
<script src="typed.js"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["First sentence.", "Second sentence."],
        typeSpeed: 0
      });
  });
</script>
...

<div class="element"></div>

Add this for the animated blinking cursor.

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

answered Dec 20, 2015 at 10:46

Bhavin Solanki

4,8143 gold badges28 silver badges47 bronze badges

1 Comment

Nicole Davis Over a year ago

Thank you so much for the answer but this still does not solve my question about the font size changes.

Collectives™ on Stack Overflow

How to Style Typing Animation in Javascript

3 Answers 3

2 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related