2

Есть код с использованием 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/[email protected]"></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);
});

1 ответ 1

2

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>

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

9
  • 1
    Спасибо, признателен за помощь 27 мар 2019 в 22:13
  • можно ли как - то задать шрифт печатающему курсору? 28 мар 2019 в 8:36
  • @НовиковМаксим изображение каретки другое? я не понял 28 мар 2019 в 8:41
  • Почти, у меня в styles.css есть font-face, где есть шрифт Pixeled. Как его задать курсору? 28 мар 2019 в 8:47
  • @НовиковМаксим а есть ссылка на этот шрифт в инете, чтобы я попробовал? 28 мар 2019 в 8:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.