Давайте рассмотрим не сложный способ, где создадим эффект печатающегося текста при помощи CSS. Которое автоматически станет печатать знаки, что в последующим будут значение слов. А также все происходит в заданном месте, это на темном фоне, где не то, что будет одна строка, здесь сделаем следующие строки, то количество, которое вам потребуется.
HTML
Код
<pre id="pechatayem-tekst"></pre>
CSS
Код
#pechatayem-tekst {
display: block;
margin: auto;
text-align: center;
width: 315px;
padding: 8px 15px;
font-size: 20px;
background-color: #1e232d;
color: #f7f1f1;
border-radius: 3px;
}
JS
Код
function writeTextByJS(id, text, speed){
var ele = document.getElementById(id),
txt = text.join("").split("");
var interval = setInterval(function(){
if(!txt[0]){
return clearInterval(interval);
};
ele.innerHTML += txt.shift();
}, speed != undefined ? speed : 80); //скорость
return false;
};
writeTextByJS(
"pechatayem-tekst", //селектор
[
"Место для вашего текста \n",
"Следующая строка"
]
);
А где переменить, но тут вы сами можете включить креатив, так как все начнет работать при открытие сайта или страницы, где был изначально выставлен этот эффект печати текста.
Демонстрация
