• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать текстовый эффект набора текста на JS (Как сделать эффект печатной машинки или набор знака и текста)
Создать текстовый эффект набора текста на JS
Kosten
Дата: Воскресенье, 2021-04-18, 16:32 | Сообщение 1
Оффлайн
Администраторы
Сообщений:38989
Награды: 65
Если вам нужен красивый эффект, что будет автоматически печатать знаки, виде цифр или букв, то это решение вам понравиться. Ведь этот простой текстовый эффект терминала, написанный на ванильном JS, без зависимостей. Просто скопируйте функцию в свой код и пропиши, то что хотел видеть слова, фразы в печатном виде.



HTML

Код
<div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>_</div></div>

CSS

Код
@import url(https://fonts.googleapis.com/css?family=Khula:700);
body {
  background: #111;
}
.hidden {
  opacity:0;
}
.console-container {

  font-family:Khula;
  font-size:4em;
  text-align:center;
  height:200px;
  width:600px;
  display:block;
  position:absolute;
  color:white;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}
.console-underscore {
   display:inline-block;
  position:relative;
  top:-0.14em;
  left:10px;
}

JS

Код
consoleText(['ZorNet.Ru — сайт для вебмастера.', 'Интересные решения', 'оригинальным способом.'], 'text',['tomato','rebeccapurple','lightblue']);

function consoleText(words, id, colors) {
  if (colors === undefined) colors = ['#fff'];
  var visible = true;
  var con = document.getElementById('console');
  var letterCount = 1;
  var x = 1;
  var waiting = false;
  var target = document.getElementById(id)
  target.setAttribute('style', 'color:' + colors[0])
  window.setInterval(function() {

    if (letterCount === 0 && waiting === false) {
      waiting = true;
      target.innerHTML = words[0].substring(0, letterCount)
      window.setTimeout(function() {
        var usedColor = colors.shift();
        colors.push(usedColor);
        var usedWord = words.shift();
        words.push(usedWord);
        x = 1;
        target.setAttribute('style', 'color:' + colors[0])
        letterCount += x;
        waiting = false;
      }, 1000)
    } else if (letterCount === words[0].length + 1 && waiting === false) {
      waiting = true;
      window.setTimeout(function() {
        x = -1;
        letterCount += x;
        waiting = false;
      }, 1000)
    } else if (waiting === false) {
      target.innerHTML = words[0].substring(0, letterCount)
      letterCount += x;
    }
  }, 120)
  window.setInterval(function() {
    if (visible === true) {
      con.className = 'console-underscore hidden'
      visible = false;

    } else {
      con.className = 'console-underscore'

      visible = true;
    }
  }, 400)
}

Установка завершена.

Демонстрация
Прикрепления: 4622885.png(15.8 Kb) · terminal-text-e.zip(4.2 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать текстовый эффект набора текста на JS (Как сделать эффект печатной машинки или набор знака и текста)
  • Страница 1 из 1
  • 1
Поиск: