Question

0

109

Visualizações

Typewriter with backspacing and multiline writing

I'm quite new to HTML,CSS,JS and I'm currently working on making a web page project.

What I am trying to currently is animate something like this:

(with typewriter effect) "Hello people!" (backspace to clear text) "hello friends" (pause, typewriter cursor blinking)

(cursor goes to new line, starts writing in different text color/font)"This is my first big project..."

I have found an existing script on GitHub for typewriter/backspacing effect, and this is my code so far:

var typed = new Typed(".auto-type", {
  strings: ["Hello people!^1000", "Hello friends.^1000"],
  startDelay: 1000,
  typeSpeed: 170,
  backSpeed: 50,
  cursorChar: '\u25ae',
  autoInsertCss: true,
  smartBackspace: true,

})

<h1><span class="auto-type"></span></h1>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

Would someone please give me a hint on how to do the finishing the new line with different color/font?

about 4 years ago · Santiago Gelvez

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-06-30T23:35:34.680Z

you can use html tag in typed so you can :

use a third sentence with a <br/> inside for multiline
embed new sentence inside a span with a class manipulated in css for color

var typed = new Typed(".auto-type", {
  strings: ["Hello people!^1000", "Hello friends.^1000", "Hello friends.<br/><span class=\"my-big-project\">This is my first big project...</span>^1000"],
  startDelay: 1000,
  typeSpeed: 170,
  backSpeed: 50,
  cursorChar: '\u25ae',
  autoInsertCss: true,
  smartBackspace: true,

})

.my-big-project {
  color: blue;
}

<h1><span class="auto-type"></span></h1>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>

0

109

Typewriter with backspacing and multiline writing

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT