Печатающийся текст / Скрипты / Сниппеты Bootstrap

Каталог: Сниппеты Bootstrap

Категория: Скрипты

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 2590

Количество символов:

Посмотрели: 3573 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: https://goo.gl/QPnkxH

Информация: Пользователям

Информация: Правообладателям

Теги: текстовый эффект, Скрипт, Script, Snippet, javascript, текст, сниппет, Bootstrap, эффект текста

Поделился: BootstrapТема

Добавлено: 2018-01-08 в 11:26

Метка: 1515399982

⇄ ⇅

<hr />

<pre><code>
var TxtType = 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;
 };

TxtType.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 = '&lt;span class="wrap"&gt;'+this.txt+'&lt;/span&gt;';

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

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

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

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

</div></div>

TxtType.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 = 200 - 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);
 };

BootstrapTema

Печатающийся текст

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0