• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создание эффекта печати текста на сайте (Красивый эффект печатающегося текста при помощи CSS3)
Создание эффекта печати текста на сайте
Kosten
Дата: Воскресенье, 2019-11-03, 00:39 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25120
Награды: 57


Давайте рассмотрим не сложный способ, где создадим эффект печатающегося текста при помощи 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",
    "Следующая строка"
    ]
);

А где переменить, но тут вы сами можете включить креатив, так как все начнет работать при открытие сайта или страницы, где был изначально выставлен этот эффект печати текста.

Демонстрация
Прикрепления: 1433738.png(5.8 Kb) · text-print-effe.zip(3.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создание эффекта печати текста на сайте (Красивый эффект печатающегося текста при помощи CSS3)
  • Страница 1 из 1
  • 1
Поиск: