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

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

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

С чего начать

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

Редакция: Simon Codrington

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree