• Страница 1 из 1
  • 1
Создать текстовый эффект набора текста на JS
Kosten
Воскресенье, 18 Апреля 2021, 16:32 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44494
Награды: 70
Если вам нужен красивый эффект, что будет автоматически печатать знаки, виде цифр или букв, то это решение вам понравиться. Ведь этот простой текстовый эффект терминала, написанный на ванильном 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)
Kosten
Пятница, 01 Декабря 2023, 01:14 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44494
Награды: 70
Также еще несколько элементов на текстовый эффект, который вам может пригодится в создание оригинального дизайна на сайте.

Неоновый текстовый эффект


See the Pen
Neon Text Effect
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Пятница, 01 Декабря 2023, 01:15 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44494
Награды: 70
Красивый эффект, что то виде мигалки - CSS-текст-FX


See the Pen
CSS Text-FX
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Пятница, 01 Декабря 2023, 01:17 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44494
Награды: 70
Текстовый эффект дыма в знаках на CSS


See the Pen
(cool) text effect
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Пятница, 01 Декабря 2023, 01:19 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44494
Награды: 70
Текстовый эффект матрицы


See the Pen
Matrix Text Effect
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: