Блог о веб-разработке > Javascript > Анимация текста с помощью Blast.js

Анимация текста с помощью Blast.js

Анимация HTML элементов в настоящее время – более менее простая задача с помощью библиотек Javascript.

Если вы хотите анимировать слово в абзаце, вы должны обернуть его в тег span и задать цель в скрипте. Если у вас несколько тегов span, то задача довольно простая. Но если вам надо анимировать каждую букву в абзаце? Для каждой буквы вам нужно будет добавить разметку и редактировать такой будет проблематично. Для решения этой проблемы был написан Blast.js.

Что такое Blast.js?

Blast.js это jQuery плагин, который позволяет анимировать каждую букву, слово или целое предложение. Для использования плагина вам понадобится подключить библиотеку jQuery и скрипт Blast.js. Примеры использования вы можете найти на сайте.

Как уже упоминалось, Blast.js позволяет нам создавать элементы вокруг символов, слов, предложений, но библиотека не ограничивается этими возможностями. Далее мы увидим, некоторые конкретные примеры применения скрипта. Полный список опций вы можете посмотреть на сайте проекта.

Анимируем наше первое предложение

В первом примере мы анимируем заголовок. Буквы будут двигаться одна за другой направо.

<h1>Hello World!</h1>

1	<h1>Hello World!</h1>

После подключения JQuery и Blast.js разместите следующий код:

$(function() {

  // Animation code

});

$(function() {

// Animation code

});

Blast.js предлагает новый метод для объекта JQuery: .blast (), который принимает один параметр: объект, содержащий все опции, которые вы хотите использовать. В первом примере мы будем использовать только один вариант, “разделитель: символ”, чтобы указать, что мы хотим, анимировать в заголовке каждую букву.

По умолчанию используется объект “слово” и теги span создавались бы вокруг каждого слова.

$('h1').blast({<br>
  delimiter: 'character'<br>
});

$('h1').blast({

delimiter: 'character'

});

Скрипт сгенерирует следующий код:

<h1 class="blast-root">
  <span class="blast">H</span>
  <span class="blast">e</span>
  <span class="blast">l</span>
  <span class="blast">l</span>
  <span class="blast">o</span>
  <span class="blast">W</span>
  <span class="blast">o</span>
  <span class="blast">r</span>
  <span class="blast">l</span>
  <span class="blast">d</span>
  <span class="blast">!</span>
</h1>

H

e

l

o

W

o

r

l

d

!

</h1>

Теперь мы можем получить сгенерированные span элементы. Вы можете попробовать $ (‘.blast’) для эксперимента. По умолчанию, метод .blast () возвращает сгенерированные элементы, так что единственное, что вам нужно сделать, чтобы получить эти элементы – передать их в переменную.

var chars = $('h1').blast({
   delimiter: 'character'
});

var chars = $('h1').blast({

delimiter: 'character'

});

Получение сгенерированных элементов полезно, но не всегда. Если вы хотите, чтобы метод .blast (), вернул родительский элемент необходимо указать опцию: returnGenerated. По умолчанию, она имеет значение true.

var chars = $('h1').blast({
   delimiter: 'character',
   returnGenerated: false
});

var chars = $('h1').blast({

delimiter: 'character',

returnGenerated: false

});

Давайте вернемся к нашему примеру. Мы анимируем каждый символ, методом .each().

Метод .each () будет выполнять функцию для каждого элемента который хранится в объекте JQuery.

chars.each(function(i) {
   $(this).css({
     position: 'relative',
     left: 0
   })
.delay(i * 45)
.animate({ left: '50px' }, 300);

chars.each(function(i) {

$(this).css({

position: 'relative',

left: 0

})

.delay(i * 45)

.animate({ left: '50px' }, 300);

Сначала мы получаем текущий символ используя $(this). Задаем каждому элементу позицию 0.

Метод .delay () запускает анимацию после определенного количества миллисекунд, используя i* 45. Для первого символа, I равен 0, так что анимация запускается немедленно, второй символ анимируется через 45 миллисекунд, и так далее.

Наша анимация готова! Вы можете просмотреть живой пример ниже.

По умолчанию, создаются элементы span и они подходят для большинства случаев. Но есть возможность использовать и другие теги, например, div strong p.

Для примера мы сделаем абзац в котором каждое слово будет выделено случайным цветом. Для генерации случайных мы будем использовать модифицированный Math.random().

function rand(min, max) {
   return parseInt(Math.round(min + Math.random() * (max - min)));
}

function rand(min, max) {

return parseInt(Math.round(min + Math.random() * (max - min)));

}

Сейчас мы готовы раскрасить наш параграф. Мы используем разделитель “word”. Добавляем новую функцию teg, которая указывает какой тип элементов мы хотим сгенерировать. Вместо тега span укажем тег em.

var words = $('p').blast({
   delimiter: 'word',
   tag: 'em'
});

var words = $('p').blast({

delimiter: 'word',

tag: 'em'

});

Теперь все слова заключены в тег em.Для каждого слова определяем свой цвет с помощью .css()

words.each(function() {
   $(this).css('color', 
   'rgb(' + rand(0, 255) + '
   ' + rand(0, 255) + ',
   ' + rand(0, 255) + ')');
});

words.each(function() {

$(this).css('color',

'rgb(' + rand(0, 255) + '

' + rand(0, 255) + ',

' + rand(0, 255) + ')');

});

Что насчет существующих элементов?

Blast.js помещает элементы в контейнер. Что если элемент уже содержит какие то теги?

Что будет если применить Blast к следующему коду.

<p>Hello <span>World</span>!</p>

1	<p>Hello <span>World</span>!</p>

Blast.js не нарушит вашего DOM дерево. Существующий элемент span не будет удален, новый элемент с классом blast будет создан. Выполняя $(‘p’).blast() мы получим следующий результат:

<p class="blast-root">
  <span class="blast">Hello</span>
  <span>
  <span class="blast">World</span>
  </span>
  <span class="blast">!</span>
</p>

Hello

World

!

Заключение

Blast.js не будет полезен для всех, но если вы хотите анимировать текст, то это лучший вариант.

(4 votes, average: 4,50 out of 5)

Загрузка...

Анимация текста с помощью Blast.js

Что такое Blast.js?

Анимируем наше первое предложение

Что насчет существующих элементов?

Заключение

Добавить комментарий Отменить ответ