Простые, но достаточно привлекательные визуальные эффекты для анимации свойств текста. А если их использовать в сочетании с переходами CSS3, то они станут еще более интересными. Данный скрипт приводится в виде плагина jQuery (чтобы было легче использовать):

$.fn.animateText = function(delay, klass) {
   
  var text = this.text();
  var letters = text.split('');
   
  return this.each(function(){
    var $this = $(this);
    $this.html(text.replace(/./g, '<span class="letter">$&</span>'));
    $this.find('span.letter').each(function(i, el){
      setTimeout(function(){ $(el).addClass(klass); }, delay * i);
    });
  });
   
};

Использование:
Создаем класс CSS для выделения текста и применяем плагин для элемента с текстом, например, к параграфу:

$('p').animateText(15, 'foo');

Добавлено: 18 Апреля 2018 10:17:00 Добавил: Андрей Ковальчук Нравится 0

Добавить