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

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

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

С чего начать

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

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>

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

Наш пример просеивает все элементы разметки на класс .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();

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

Вот и веселая часть статьи. Мы пробежимся по каждому элементу .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();
});

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

Наше предложение плавно появляется с задержкой для создания эффекта шахматного порядка. Каждому символу задается первоначальная задержка в 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;
}

Мы применяем забавную анимацию к каждому 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;
  }
}

При нажатии на кнопку первое предложение становится активным, и все его 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>

Редакция: Simon Codrington

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree