Совет: Трансформация отдельных символов с помощью CSS и JS

Дата публикации: 2016-06-15

От автора: если вы ищите интересный эффект для своего нового проекта, тогда наш совет должен помочь вам. Сегодня мы разберем, как трансформировать отдельные символы в предложении. Для навигации внутри выбранного предложения и включения анимации на каждой букве в нашем примере мы прибегли к помощи JQuery. Однако мы используем CSS анимацию, а не JQuery.

С чего начать

Для начала нам потребуется JQuery. После подключения JQuery можно добавлять нашу JS функцию в функцию document.ready().

jQuery(document).ready(function() {
    // Весь код будет тут
});

jQuery(document).ready(function() {

// Весь код будет тут

});

Для работы нам нужно добавить самую простую разметку. Мы добавим в HTML файл пару строк текста с классом .sentence и стандартную кнопку.

<h1 class="sentence title">Fancy Slide In Text</h1>
<h3 class="sentence subtitle">Embrance the fanciness!</h3>
<div class="button">Click to Animate</div>

<h1 class="sentence title">Fancy Slide In Text</h1>

<h3 class="sentence subtitle">Embrance the fanciness!</h3>

<div class="button">Click to Animate</div>

Подготавливаем наше предложение

Наш пример просеивает все элементы разметки на класс .sentence. После отбора элементов их прогоняют в цикле для получения текста и создания подстроки. За один прогон из предложения извлекается один символ. Все буквы оборачиваются в тег span, чтобы позже мы могли анимировать их по отдельности.

Также мы должны проверять предложение на наличие пустых символов (т.е. пробелов « »). Пробелы мы пропускаем, так как нам нужно анимировать только видимые буквы.

После просеивания текста мы возвращаем полученный контент обратно в предложение, заменяя обычный текст на символы в тегах span.

// Пробегаемся по предложению и оборачиваем каждый символ в span
function setUpCharacters() {	
  var $sentences = $('.sentence');

  // Пробегаемся по каждому предложению
  $sentences.each(function() {
    var $sentence = $(this);
    var newContent = '';

    // Просеиваем все символы предложения
    for (i = 0; i < $sentence.text().length; i++) {
      var substring = $sentence.text().substr(i, 1);

      // Если символ есть, оборачиваем его в тег
      if (substring != " ") {
        newContent += '<span>' + substring + '</span>';
      } else {
        newContent += substring;
      } 
    }

    // Заменяем контент
    $sentence.html(newContent); 
  });
}

setUpCharacters();

// Пробегаемся по предложению и оборачиваем каждый символ в span

function setUpCharacters() {

var $sentences = $('.sentence');

// Пробегаемся по каждому предложению

$sentences.each(function() {

var $sentence = $(this);

var newContent = '';

// Просеиваем все символы предложения

for (i = 0; i < $sentence.text().length; i++) {

var substring = $sentence.text().substr(i, 1);

// Если символ есть, оборачиваем его в тег

if (substring != " ") {

newContent += '<span>' + substring + '</span>';

} else {

newContent += substring;

}

// Заменяем контент

$sentence.html(newContent);

});

}

setUpCharacters();

Запускаем анимацию

Вот и веселая часть статьи. Мы пробежимся по каждому элементу .sentence и его дочерним тегам span и анимируем их. Функция ниже на самом деле не запускает анимацию, она просто добавляет класс .active к элементам. После добавления активного состояния, мы можем прикрепить к символам любую CSS анимацию, о какой только можно мечтать!

// Пробегаемся по предложению и добавляем активное состояние
function triggerCharacters() {
  var sentenceCounter = 0;
  var sentenceDelay = 600;

  $('.sentence').each(function() {
    var $sentence = $(this);

    // Делаем это для каждого предложения
    setTimeout(function() {
      var $spans = $sentence.find('span');
      var spanCounter = 0;
      var spanDelay = 75;

      // Проходим по всем span и запускаем их
      $spans.each(function() {
        var $span = $(this);

        // Устанавливаем timeout для запуска span-ов с задержкой
        setTimeout(function() {	
          $span.toggleClass('active');
        }, (spanCounter * spanDelay));

        spanCounter++; 
      });
    }, (sentenceCounter * sentenceDelay));

    sentenceCounter++;
  });
}

// В нашем примере анимация запускается по нажатию на кнопку
$('.button').on('click', function() {
  triggerCharacters();
});

// Пробегаемся по предложению и добавляем активное состояние

function triggerCharacters() {

var sentenceCounter = 0;

var sentenceDelay = 600;

$('.sentence').each(function() {

var $sentence = $(this);

// Делаем это для каждого предложения

setTimeout(function() {

var $spans = $sentence.find('span');

var spanCounter = 0;

var spanDelay = 75;

// Проходим по всем span и запускаем их

$spans.each(function() {

var $span = $(this);

// Устанавливаем timeout для запуска span-ов с задержкой

setTimeout(function() {

$span.toggleClass('active');

}, (spanCounter * spanDelay));

spanCounter++;

});

}, (sentenceCounter * sentenceDelay));

sentenceCounter++;

});

}

// В нашем примере анимация запускается по нажатию на кнопку

$('.button').on('click', function() {

triggerCharacters();

});

Разберемся, что тут происходит:

Наше предложение плавно появляется с задержкой для создания эффекта шахматного порядка. Каждому символу задается первоначальная задержка в 600ns, которая используется внешней функцией setTimeout().

Мы находим и прогоняем в цикле все элементы .sentence и забираем все span’ы. Задаем новую задержку, на этот раз для каждого символа. Так каждый span будет появляться отдельно.

Далее срабатывает внутренняя функция setTimeOut() и анимирует каждый символ.

В нашем примере анимация запускается по нажатию кнопки. Для этого мы находим элемент .button и цепляем на него функцию triggerCharacters(). Функцию можно привязать к любому другому элементу или же запускать после загрузки страницы, тут все зависит от вас.

Сама анимация

Всем span’ам в предложении мы задаем базовые стили, а анимацию применяем только при наличии класса .active.

.sentence span {
  opacity: 0;
  position: relative;
  display: inline-block;
}
.sentence span.active {
  animation: bounceUp 600ms ease 0ms 1 normal both;
}

.sentence span {

opacity: 0;

position: relative;

display: inline-block;

}

.sentence span.active {

animation: bounceUp 600ms ease 0ms 1 normal both;

}

Мы применяем забавную анимацию к каждому span тегу. Мы сдвигаем позицию элемента сначала вверх, потом вниз и в исходное положение.

/* Скачок вверх */
@keyframes bounceUp {
  0% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 0;
  }
  50% {
    transform: translate3d(0px, -50px, 0px);
    opacity: 0.7;
  }
  80% {
    transform: translate3d(0px, 20px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
}

/* Скачок вверх */

@keyframes bounceUp {

0% {

transform: translate3d(0px, 0px, 0px);

opacity: 0;

}

50% {

transform: translate3d(0px, -50px, 0px);

opacity: 0.7;

}

80% {

transform: translate3d(0px, 20px, 0px);

opacity: 1;

}

100% {

transform: translate3d(0px, 0px, 0px);

opacity: 1;

}

При нажатии на кнопку первое предложение становится активным, и все его span’ы приходят в движение. С небольшой задержкой активируется второе предложение с его тегами span.

Анимация в действии

Ниже я дал ссылку на CodePen демо, где вы можете посмотреть на работу нашего примера. Покопайтесь в анимации и создайте свой собственный эффект! Анимация каждого символа в строке от SitePoint (@SitePoint) на сайте CodePen.

Про доступность

После того, как мы разбили предложение на отдельные символы, есть вероятность, что у скрин ридеров возникнут проблемы с чтением слов. Дабы такого не возникло, можно сообщить скрин ридеру, что это предложение с помощью атрибута aria-label. А затем добавить каждому span’у атрибут aria-hidden=»true», чтобы скрыть эти теги от него. Таким образом, скрин ридер должен правильно читать анимируемое предложение и не замечать теги span. Разметка после обработки JS выглядит следующим образом:

<h1 class="sentence title" aria-label="Fancy Slide In Text">
  <span class="active" aria-hidden="true">F</span>
  <span class="active" aria-hidden="true">a</span>
  <span class="active" aria-hidden="true">n</span>
  <span class="active" aria-hidden="true">c</span>
  <span class="active" aria-hidden="true">y</span> 
  <span class="active" aria-hidden="true">S</span>
  <span class="active" aria-hidden="true">l</span>
  <span class="active" aria-hidden="true">i</span>
  <span class="active" aria-hidden="true">d</span>
  <span class="active" aria-hidden="true">e</span> 
  <span class="active" aria-hidden="true">I</span>
  <span class="active" aria-hidden="true">n</span> 
  <span class="active" aria-hidden="true">T</span>
  <span class="active" aria-hidden="true">e</span>
  <span class="active" aria-hidden="true">x</span>
  <span class="active" aria-hidden="true">t</span>
</h1>