Анимация HTML-элемента с помощью CSS или JavaScript в настоящее время с помощью библиотек является более или менее простой задачей. Но вы можете только оживить полностью существующий элемент.
Это означает, что если вы хотите анимировать одно слово в абзаце, вы должны обернуть слово в отдельный элемент (например, в span ) и затем нацелить его соответствующим образом.
Если у вас есть только один или два элемента span как это, это не имеет большого значения, но что, если вы хотите анимировать каждый символ в абзаце? Для каждого символа вам нужно будет создать span , который добавляет много дополнительной разметки и затрудняет редактирование текста. Вот почему Blast.js существует.
Что такое Blast.js?
Blast.js — это плагин jQuery, который позволяет анимировать отдельные символы, слова или предложения. В этой статье я приведу несколько примеров, чтобы вы могли увидеть, как использовать Blast.js. Чтобы использовать Blast.js и попробовать приведенные ниже примеры, вам потребуется jQuery и, конечно, файл Blast.js, который можно найти на веб-сайте проекта для Blast.js .
Как уже упоминалось, Blast.js позволяет нам создавать элементы вокруг символов, слов или предложений, но библиотека не ограничивается только этими параметрами. В следующем разделе мы увидим несколько конкретных примеров для ознакомления с некоторыми опциями. Список вариантов, которые мы увидим, не является исчерпывающим; Полный список доступных опций можно найти на сайте проекта.
Взрывая наш первый кусок текста
В этом первом примере мы взорвем заголовок, чтобы анимировать каждого персонажа и переместить их один за другим вправо. Единственный необходимый HTML-код:
<h1>Hello World!</h1>
После включения jQuery и Blast.js следующий фрагмент кода в этой части будет находиться в вашем пользовательском файле JavaScript внутри обработчика готовности jQuery, чтобы обеспечить готовность страницы:
$(function() { // Animation code });
Теперь мы можем взорвать наш титул. В нашем примере достаточно использовать $('h1') для нацеливания на элемент, но в вашем случае вы будете использовать любой селектор, подходящий для нацеливания на элемент.
Blast.js предлагает новый метод для объекта jQuery: .blast() , который принимает один параметр: объект, перечисляющий все опции, которые вы хотите использовать. В этом первом примере мы будем использовать только одну опцию delimiter: 'character' , чтобы указать, что мы хотим взорвать наш заголовок символ за символом.
Если бы мы не включили параметр, было бы использовано значение по умолчанию 'word' (вместо «символ», поэтому вокруг каждого слова будет создан span (а не вокруг каждого символа, как мы хотим здесь).
$('h1').blast({ delimiter: 'character' });
При этом наш простой элемент h1 будет взорван и приведет к следующему сгенерированному DOM:
<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>
Обратите внимание, что пространство между словами было сохранено и не было заключено в span .
Теперь нам нужно получить сгенерированные элементы span . Например, вы можете попробовать $('.blast') , но есть более простой способ. По умолчанию метод .blast() возвращает сгенерированные элементы, поэтому единственное, что вам нужно сделать для получения этих элементов, это сохранить их в переменной.
var chars = $('h1').blast({ delimiter: 'character' });
Получение сгенерированных элементов полезно, но не всегда. Итак, если вы хотите, чтобы метод .blast() возвращал родительский элемент (основной, который вы обрабатываете), а не сгенерированные, это можно сделать с помощью другого параметра: returnGenerated . По умолчанию установлено значение true ; установите значение false и у вас будет родительский элемент:
var chars = $('h1').blast({ delimiter: 'character', returnGenerated: false });
Давайте вернемся к нашему примеру, чтобы оживить элементы, которые мы собрали. Мы будем анимировать каждый символ, один за другим, благодаря .each() .
Метод .each() будет выполнять функцию для каждого элемента, хранящегося в объекте jQuery. Вот тот, который мы будем использовать, объяснил в комментариях.
// A character by character animation chars.each(function(i) { // initialize position $(this).css({ position: 'relative', left: 0 }) // Delay: we don't want to animate // characters simultaneously .delay(i * 45) // Animate to the right .animate({ left: '50px' }, 300); });
Чтобы объяснить код: во-первых, мы извлекаем текущий элемент (т.е. текущий символ в нашем случае), используя $(this) . Мы инициализируем его относительную позицию на ноль и, наконец, мы анимируем эту позицию.
Как указано в соответствующем комментарии в коде, метод .delay() запускает анимацию через определенное количество миллисекунд, используя i * 45 , где i — счетчик, предоставленный jQuery (который мы передаем в качестве параметра). Для первого символа i равно 0 , поэтому анимация запускается немедленно, затем она равна 1 а второй персонаж анимируется через 45 миллисекунд и так далее.
Наша анимация готова, и она работает! Вы можете посмотреть живой пример ниже.
Выберите свой элемент упаковки
По умолчанию элементы span создаются, и это то, что нам нужно в большинстве случаев. Но иногда мы хотели бы поиграть с другими элементами, такими как strong , em или даже div и p . С Blast.js это возможно.
Для этого в следующем примере мы создадим абзац, в котором каждое слово будет стилизовано случайным цветом и инкапсулировано в элемент em .
Для начала нам нужна функция для предоставления нам случайного числа. Мы будем использовать модифицированную версию Math.random() доступную в родном JavaScript.
function rand(min, max) { return parseInt(Math.round(min + Math.random() * (max - min))); }
Эта новая функция даст нам случайное целое число между min и max , аргументы, переданные в функцию.
Теперь мы готовы раскрасить наш абзац. Сначала мы взрываем наш абзац, используя разделитель 'word' . Мы добавили новую опцию: tag , которая позволяет нам указать тег, который мы хотим, чтобы Blast.js использовал для генерации элементов. Вместо стандартного 'span' мы установим его на 'em' .
var words = $('p').blast({ delimiter: 'word', tag: 'em' });
Теперь все наши слова заключены в теги em . Для каждого тега мы определяем новый цвет благодаря методу jQuery .css() и нашей пользовательской функции rand() :
words.each(function() { $(this).css('color', 'rgb(' + rand(0, 255) + ', ' + rand(0, 255) + ', ' + rand(0, 255) + ')'); });
Далее мы добавим еще одну строку кода, чтобы представить, как получить начальное состояние нашего родительского элемента (т.е. как удалить все эти дополнительные сгенерированные теги).
Для этого вы можете присвоить значение false .blast() . Это говорит Blast.js, что все теги, добавленные с предыдущими вызовами этого метода, будут удалены.
Вы можете просмотреть живую версию этого примера ниже.
Обратите внимание, что применение .blast(false) к элементу, который не был преобразован Blast.js, ничего не изменит.
Поиск с Blast.js
По умолчанию Blast.js создает элементы вокруг каждого слова, символа или предложения в вашем тексте. Но вы также можете указать только одно слово или одну группу слов: Blast.js будет инкапсулировать каждое вхождение слова или группы слов в элемент. Для этого мы используем опцию search со строкой в качестве значения, а не опцию delimiter .
Для демонстрации мы создадим форму, содержащую ввод и кнопку отправки. Пользователь будет указывать во входных данных слово для поиска в определенном абзаце, а Blast.js затем инкапсулирует искомые термины в элементы span .
<form method="get" action="search.html"> <p> <input type="text" name="s" id="s" placeholder="Search"> <input type="submit" value="Go!"> </p> </form>
Мы будем использовать событие submit в нашей форме, чтобы выполнить это.
$('form').submit(function(e) { $('#awesometext').blast(false).blast({ search: $('#s').val(), customClass: 'search', generateIndexID: true }); e.preventDefault(); });
Инструкция e.preventDefault(); Включено, чтобы отключить поведение формы по умолчанию, которое заключается в отправке формы.
Мы извлекаем наш абзац с помощью правого селектора перед .blast() применением .blast() со значением false . Таким образом, если пользователь ранее выполнял другие поиски, они будут очищены.
Далее мы снова используем метод .blast() , на этот раз для поиска .blast() термина. Для этого мы используем опцию search , присваивая ей значение ввода. Два других варианта не являются обязательными, но они могут быть полезны, и я хотел показать вам, что они существуют.
Опция customClass позволяет нам добавлять собственное имя класса к сгенерированным элементам. Если вы посмотрели на сгенерированные элементы в предыдущих примерах, вы наверняка увидели, что у них всех есть класс blast . С customClass вы можете добавить один или несколько классов.
Параметр generateIndexID является логическим значением. При значении true он будет добавлять идентификатор для каждого сгенерированного элемента. Для работы необходимо использовать параметр customClass . Здесь мы выбрали класс search , поэтому первый сгенерированный элемент будет иметь идентификатор search-1 , второй — search-2 и т. Д.
Чтобы сделать наш пример полезным, нам нужно добавить некоторые правила в CSS, чтобы выделить сгенерированные элементы. Например, вы можете применять следующие правила.
.search { background-color: #0096ff; color: #fff; } #search-1 { font-weight: bold; }
Вы можете просмотреть живую версию этого примера ниже. Попробуйте ввести одно из существующих слов, показанных на странице, чтобы увидеть эффект.
Как насчет существующих элементов?
Теперь есть важный вопрос, на который нужно ответить, когда мы увидели, как работает Blast.js. Поскольку мы применяем метод .blast() к контейнеру, что если этот контейнер уже содержит некоторые элементы, кроме текстовых узлов? Например, что произойдет, если мы применим взрыв к следующему абзацу?
<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>
Наконец: что, если эти существующие элементы span самом деле представляют собой span сгенерированный Blast.js? Ответ зависит от того, что вы хотите сделать.
Предполагая, что мы применили метод .blast() к абзацу с параметром delimiter установленным на 'word' , если мы снова применим тот же метод, предыдущие сгенерированные элементы будут удалены перед созданием новых, даже если новый call использует поиск вместо разделителя.
Однако, если вы .blast() поиск по термину и .blast() метод .blast() для поиска нового термина, старый поиск не будет удален. В нашем последнем примере предыдущей части попытайтесь удалить .blast(false) . В этом случае новые запросы будут выделены, но старые также останутся выделенными.
В заключение
Blast.js не будет полезен для всех, и некоторые могут посчитать это совершенно ненужным. Но если вы хотите анимировать текст, это может быть одним из лучших вариантов, которые вы можете найти.
Как сказано выше, вы можете найти другие варианты для настройки сгенерированных элементов. Вы даже можете отключить атрибуты ARIA, если захотите.
Если у вас есть какие-либо мысли о том, как это можно использовать творчески, или если вы использовали этот или другой инструмент для анимации текста, не стесняйтесь сообщить нам об этом в ходе обсуждения.