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?
you can use html tag in typed so you can :
<br/> inside for multilinevar 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>