CODEWITHSUNDEEP
javascripthtmlcss
dom-gg
dom-gg

Reputation: 15

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/[email protected]"></script>

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

Upvotes: 1

Views: 553

Answers (1)

jeremy-denis
jeremy-denis

Reputation: 6878

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/[email protected]"></script>

Upvotes: 3

Related Questions