Лучшая анимированная типографика во всём интернете. Примеры в предыдущей публикации про фреймворки для анимации текста демонстрируют отличные способы прокачки навыков анимации, и как вы знаете, это только примеры кода, которые уже закодированных за вас. Но где найти вдохновение, чтобы создать свою собственную анимированную надпись? Не беспокойтесь, мы прикрыли ваш тыл. Мы, перечислили мощнейшую анимацию типографику, которая поможет вашему сайту выделиться. Попробуйте оживить его, если сможете!
Вдохновение для буквенных эффектов с помощью anime.js
В октябре 2016 года, Codrops объединили anime.js с тремя другими фреймворками, чтобы создать учебное руководство по кодированию простых и творческих буквенных эффектов. Результат представляет собой набор из 18 элегантно анимированных заголовков и усилений сообщения, которые иначе потерялись бы на фоне. Это, безусловно, самые вдохновляющие примеры текстовой анимации здесь.
WWF Tiger Challenge
Сайт WWF’s Run4Tiger, был разработан Hungry Boys, креативным агентством в Москве. Он ловко превращает сильное типографическое сообщение в изображение бегущего тигра визуально сообщая о проблеме исчезающих тигров, которая может быть решена путем применения подобных позитивных решений в будущем. Анимация построена с использованием HTML5, JavaScript, Canvas и запускается пользователем при прокрутке веб-сайта вниз. Это отличный пример использования анимации текста для укрепления бизнес-сообщения.
Вот как создатель проекта Ксения Апресян описывает его на Творческом блоге:
Мы объединили использование трекпада и скроллинга, чтобы усилить движение вперед, чтобы рисовать параллели с помощью бега и наконец сделать что-то по-настоящему важное для поддержания этих вымирающих видов, которые сами по себе — весьма хорошие атлеты!
Petar Stojakovic
Петар Стоякович — дизайнер цифровых продуктов и арт-директор, который управляет собственной небольшой студией в Сербии. Несмотря на то, что команда небольшая, дизайн его веб-сайта очень впечатляющий и использует передовые веб-технологии. В приведенном выше заголовке используется фреймворк для анимации букв, упомянутый ранее, и является отличным примером того, как использовать уже существующий фреймворк для создания вашей собственной персонализированной анимированной типографики.
YEOSH
Веб-сайт YEOSH отлично иллюстрирует то, насколько простым может быть постепенное исчезание текста поверх изображения. В цитате используется свойство CSS transform для перемещения текста снизу вверх, когда пользователь прокручивает до соответствующей части страницы.
Unitasking
Веб-сайт Трента Уолтона по настоящему особенный. Будучи веб-дизайнером и разработчиком с интересом к типографике, он создает уникальные заголовки для каждого из постов в блоге на его веб-сайте. В приведенном выше примере он использует CSS и JavaScript для того, чтобы ‘I’ в слове ‘Unitasking’ выделялась при наведении курсора мыши и превращалась в ‘1’. При том, что это выглядит очень симпатично, намерение стоящее позади эффекта связано с содержанием статьи. И как будто этого было недостаточно, так его анимированные заголовки выглядит превосходно во всех браузерах и всегда отзывчивы. Как это умно, черт возьми!
