Анимация текста Typing Carousel
Источник: ruseller.com, codepen.io

[html]
<link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<script src="http://forumfiles.ru/files/0012/6c/79/44604.js"></script>
<div class="text1">ForumD.ru - это
  <span
     class="txt-rotate"
     data-period="4000"
     data-rotate='[ "бесплатная техподдержка.", "изготовление дизайна для вашего проекта.", "конкурсы и акции.", "постоянно пополняющийся каталог скриптов.", "каталог бесплатных дизайнов для форумов." ]'></span>
</div>
<div class="text2">Вы еще не с нами?</div>

<div class="text3"><span class="byte"><a href="http://forumd.ru">ForumD.ru</a></span> - это
  <span
     class="txt-rotate"
     data-period="4000"
     data-rotate='[ "бесплатная техподдержка.", "изготовление дизайна для вашего проекта.", "конкурсы и акции.", "постоянно пополняющийся каталог скриптов.", "каталог бесплатных дизайнов для форумов." ]'></span>
</div>
<div class="text4">Вы еще не с нами?</div>

<style>
.info {font-family: Cambria;
   font-size: 18px;
   color: black;}
.info a:link, .info a:visited, .info a:active {font-family: Cambria;
   font-size: 18px;
   color: blue;}

.text1, .text2, .text3, .text4 {
  font-weight: 200;
  margin: 0.4em 0;
}
.text1, .text3 { font-size: 1.5em;
            font-family: Raleway;}
.text2 {
  color: #888;
  font-size: 1,2em;
}

.text4 {
  color: #888;
  font-size: 1.6em;
  font-family: Caveat;}

.text3 a:link, .text1 a:visited, .text1 a:active {font-family: 'Pacifico', sans-serif;
   font-size: 2em;
   color: #000;
   text-decoration: none;}
</style>
[/html]

ставим скрипт

ставим скрипт одним из способов (выбрать можно любой, но только один)
1 способ (компактный): Если вы любите компактность, рекомендую в поле html низ просто подгрузить скрипт следующей строчкой кода

Код:
<script src="http://forumfiles.ru/files/0012/6c/79/44604.js"></script><!-- Анимация текста Typing Carousel-->

2 способ: если по какой то причине, вышеупомянутый [компактный 1 способ], залитый на mybb скрипт не работает
Вы можете сделать скрипт самостоятельно:
a) в обычном блокноте вставить код скрипта

Код:
var TxtRotate = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

  var that = this;
  var delta = 300 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
  document.body.appendChild(css);
};

b) сохранить файл с разрешением js;
c) залить получившийся скрипт на форум;
в) в поле html низ подгрузить скрипт, предварительно поменяв ссылочку на свою

Код:
<script src="путь_к_вашему_скрипту"></script><!-- Анимация текста Typing Carousel-->

3 способ: вставляете в поле html низ следующий код

Код:
<!-- start.Скрипт Анимация текста Typing Carousel -->
<script type="text/javascript">
var TxtRotate = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtRotate.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

  var that = this;
  var delta = 300 - Math.random() * 100;

  if (this.isDeleting) { delta /= 2; }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('txt-rotate');
  for (var i=0; i<elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-rotate');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtRotate(elements[i], JSON.parse(toRotate), period);
    }
  }
  // INJECT CSS
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
  document.body.appendChild(css);
};
</script>
<!-- end.Скрипт Анимация текста Typing Carousel -->
HTML с контентом

Это HTML-код с контентом, он размещается в нужном месте.
Вариантов может быть множество (объявление, шапка, футер, сообщение в топике)

<div class="text1">ForumD.ru - это
  <span
     class="txt-rotate"
     data-period="4000"
     data-rotate='[ "бесплатная техподдержка.", "изготовление дизайна для вашего проекта.", "конкурсы и акции.", "постоянно пополняющийся каталог скриптов.", "каталог бесплатных дизайнов для форумов." ]'></span>
</div>
<div class="text2">Вы еще не с нами?</div>


ваш фиксированный текст
это значение меняемое, напрямую зависит от длины фраз, и периода конечной задержки
здесь можно поиграться с этим значением
Ваши фразы, которые будут поочередно печататься на экране
Если фраз не хватает или слишком много, добавляем/убираем по аналогии
[заключаем фразы в кавычки, между ними ставим запятые, после последней фразы ничего не ставим]

CSS оформление

Оформление может быть любым и все зависит от вашего вкуса, фантазии и мастерства
Например, можно подгрузить шрифты

<link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />

и стилизовать текст

.text1, .text2 {
  font-weight: 200;
  margin: 0.4em 0;
}
.text1 { font-size: 1.5em;
            font-family: Raleway;}
.text2 {
  color: #888;
  font-size: 1,2em;
}

скопировать код CSS для размещение в окне стилей
Код:
.text1, .text2 {
  font-weight: 200;
  margin: 0.4em 0;
}
.text1 { font-size: 1.5em;
            font-family: Raleway;}
.text2 {
  color: #888;
  font-size: 1,2em;
}

Код можно вставить в окно стилей, при условии, что вам везде требуется одинаковое оформление.
Если требуется различное оформление, то код можно обернуть тегами <style></style> и поместить вместе  с HTML контентом

Использование в постах

Если вы планируете размещать такой эффект в постах, используя HTML, необходимо учитывать, что при использовании скрипта от сервиса, данный код работать не будет.
Работоспособность со следующим скриптом проверена.
При этом код скрипта размещаете HTML-низ, остальной код можно разместить в посте.


Быстрая установка (на случай, если вам некогда вникать)

Шаг 1. Ставим скрипт из спойлера HTML-низ
Шаг 2. Ставим один из следующих примеров

полный код для первого демо
Код:
<div class="text1">ForumD.ru - это 
  <span
     class="txt-rotate"
     data-period="4000"
     data-rotate='[ "бесплатная техподдержка.", "изготовление дизайна для вашего проекта.", "конкурсы и акции.", "постоянно пополняющийся каталог скриптов.", "каталог бесплатных дизайнов для форумов.]" ]'></span>
</div>
<div class="text2">Вы еще не с нами?</div>
<link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
<style>
.text1, .text2 {
  font-weight: 200;
  margin: 0.4em 0;
}
.text1 { font-size: 1.5em;
            font-family: Raleway;}
.text2 {
  color: #888;
  font-size: 1,2em;
}
</style>
полный код для второго демо
Код:
<div class="text1"><span class="byte"><a href="http://forumd.ru">ForumD.ru</a></span> - это 
  <span
     class="txt-rotate"
     data-period="4000"
     data-rotate='[ "бесплатная техподдержка.", "изготовление дизайна для вашего проекта.", "конкурсы и акции.", "постоянно пополняющийся каталог скриптов.", "каталог бесплатных дизайнов для форумов." ]'></span>
</div>
<div class="text2">Вы еще не с нами?</div>
<link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<style>
.text1, .text2 {
  font-weight: 200;
  margin: 0.4em 0;
}
.text1 { font-size: 1.5em;
            font-family: Raleway;}

.text2 {
  color: #888;
  font-size: 1.6em;
  font-family: Caveat;}

.text1 a:link, .text1 a:visited, .text1 a:active {font-family: 'Pacifico', sans-serif;
   font-size: 2em;
   color: #000;
   text-decoration: none;}
</style>



Возникшие у вас вопросы по установке данного скрипта или стилизации текста для него, можно задать в этой теме.
Надеюсь эффект вам понравился.