Переход на новую строку typed.js

155
22 декабря 2019, 20:20

Есть код с использованием typed.js, как сделать так, чтобы выполнялся эффект печатания? Нужно чтобы курсор переходил на новую строчку после каждой фразы и при этом, чтобы предыдущая не стиралась 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Quiz</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9"></script>
</head>
<body>
    <span id="typed"></span>
    <br>
    <span id="typed2"></span>
    <script src="script.js" charset="utf-8"></script>
</body>
</html>

styles.css

/*
    font-face
*/
@font-face {
    font-family: "Pixeled";
    src: url("../fonts/pixelmix.ttf");
}
@font-face {
    font-family: "SFMono";
    src: url("../fonts/SFMono-Regular.otf");
}
@font-face {
    font-family: "BigBlue";
    src: url("../fonts/BigBlue_Terminal_v1.0/BigBlue_Terminal_437TT.TTF");
}
/*
    ╔══╗╔══╗╔╗ ╔╗╔══╗╔══╗╔╗  ╔═══╗
    ║╔═╝║╔╗║║╚═╝║║╔═╝║╔╗║║║  ║╔══╝
    ║║  ║║║║║╔╗ ║║╚═╗║║║║║║  ║╚══╗
    ║║  ║║║║║║╚╗║╚═╗║║║║║║║  ║╔══╝
    ║╚═╗║╚╝║║║ ║║╔═╝║║╚╝║║╚═╗║╚══╗
    ╚══╝╚══╝╚╝ ╚╝╚══╝╚══╝╚══╝╚═══╝
 */
/* Styles for default console */
body {
    background-color: black;
    color: white;
}
#typed {
    font-family: Pixeled;
}
.typed-cursor {
    font-family: Pixeled;
}
/* Styles for Mac OS console */
body {
    background-color: black;
    color: white;
}
#typed {
    font-family: SFMono;
}
.typed-cursor {
    font-family: SFMono;
}
/* Styles for Windows console */
body {
    background-color: black;
    color: white;
}
#typed {
    font-family: BigBlue;
}
.typed-cursor {
    font-family: BigBlue;
}
/*
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
span {
    font-family: BigBlue;
}

script.js

$('document').ready(function() {
    let stringsArr = [
        "hello",
        "is anyone here?"
    ];
    let options = {
      strings: ["hello"],
      typeSpeed: 40,
      loop: false,
      cursorChar: "_",
      typeSpeed: 80, // speed per char
      backSpeed: 50,
      backDelay: 5000,
    }
    let options2 = {
      strings: ["is anyone here?"],
      typeSpeed: 40,
      loop: false,
      cursorChar: "_",
      typeSpeed: 80, // speed per char
      backSpeed: 50,
      backDelay: 5000,
      startDelay: 5000
    }
    var typed = new Typed("#typed", options);
    var typed2 = new Typed("#typed2", options2);
});
Answer 1

typed.js это не поддерживает...

попробуйте использовать typer.js, например

typer('#typer') 
  .line('Hello Neo') 
  .pause(2000) 
  .line('Follow the white rabbit...') 
  .pause(1000) 
  .back('all') 
  .continue('knock knock');
@import url(https://fonts.googleapis.com/css?family=Indie+Flower); 
 
#typer { 
  font-family: 'Indie Flower'; 
}
<link rel="stylesheet" href="https://unpkg.com/typer-js/typer.css">  
 
 <script src="https://unpkg.com/typer-js"></script> 
  
 <div id="typer"></div>

А вообще таких плагинов очень много...

READ ALSO
Не срабатывает валидация формы [закрыт]
javascript

Не срабатывает валидация формы [закрыт]

Хотите улучшить этот вопрос? Update the question so it's on-topic for Stack Overflow на русском

 109
Что означает выражение в ES6 component&lt;component&gt;?
javascript

Что означает выражение в ES6 component<component>?

Что означают такие выражения, нигде не могу найти

 109
Почему проверяется length value input не по условию?
javascript

Почему проверяется length value input не по условию?

Если длина символов меньше 12 -> innerHTML, иначе continue (не выполняет корректно ) Есть второй вопрос: если inponclick = null отключает клик, когда условие...

 128
Выбор случайного элемента из массива с вероятностью
javascript

Выбор случайного элемента из массива с вероятностью

Можно выбрать случайное значение из массива с помощью кода:

 128