The Coolest Animated Text Effects Around the Web, Part 1: Frameworks

Самые крутые анимационные текстовые эффекты во всем интернете, Часть 1: Фреймворки

   

Слова звучат лучше, когда они оживают. Глядя на последние тенденции дизайна наклонных форм и заголовков, доминирующих в интернете, можно с уверенностью сказать, что есть много библиотек и шаблонов на выбор, когда дело доходит до внешнего вида веб-сайта. Но как насчет правильного посыла? Функциональность анимации заголовков может сочетаться с этими тенденциями, чтобы создать сильное и впечатляющее сообщение.

 

Однако мы объединили список лучшей, самой красивой и мощной текстовой анимации, которая придаст вашему сайту современный вид и посыл через сильное сообщение. Эти примеры можно использовать в качестве вдохновения для вашего следующего дизайн-проекта или как учебное пособие по прокачке навыков CSS3 и JavaScript.

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

Фреймворки

Креативная анимация SVG букв

Creative SVG Letter Animations

Вот первый для кодера. Codrops — блог, которые предоставляют читателям учебные руководства, тенденции и вдохновение для веба. В марте 2016 года они опубликовали статью о том, как анимировать SVG буквы с использованием плагина Segment.

Помните, когда мы говорили об экспериментальной анимации? Этот туториал определенно подпадает под эту категорию. В статье рассказывается о демонстрационной анимации, её использовании, о том, как настроить шрифт и других о JavaScript библиотеках.

Также на Codrops есть целый ряд других примеров типографики для веба, которые заставят отвиснуть вашу челюсть.

TextFX2 – Текстовые анимации CSS3

TextFX2 – CSS3 Text Animations

Вы когда-нибудь слышали о CodeCanyon? Это собственная веб-библиотека Envato для плагинов и скриптов, созданных сообществом разработчиков с более чем 21 000 позиций на выбор. Одним из них является Text FX 2, — это генератор текстовой анимации, который очень легко использовать для создания собственной текстовой анимации. Этот плагин позволяет пользователю выбрать свой любимый шрифт, цвет, анимировать несколько строк текста и анимировать с чередующимися циклами. В основном вы выбираете, всё что хотите, а анимация текста выполняется через раскрывающихся меню, и для вас генерируется код. Очень просто!

Вот демо с несколькими примерами.

Крутые текстовые эффекты – Невероятная анимация

Cool Text Effects

Если вы новичок в кодировании, то вот полностью адаптивная текстовая анимация которая подойдет вам (также, есть на CodeCanyon). Этот фрейворк позволяет вам выбирать HTML или Javascript для анимации и предоставляет библиотеку из 300 предварительно закодированных примеров, с помощью которых вы можете получить вдохновение или готовый код.

Затем файлы анимации можно импортировать в WordPress (ознакомьтесь с их руководством для WordPress), импорт происходит с поддержкой событий мыши и оптимизирован для SEO.

Некоторые из доступных функций:

  • Адаптивный дизайн
  • Анимация букв и слов
  • Контроль скорости и колебания
  • Полная совместимость со всеми современными браузерами и с запасным вариантом для старых браузеров

Anime.js

Anime.js — впечатляющий, быстрый и легкий JavaScript фреймворк, разработанный Джулианом Гарнье, который анимирует все что угодно от CSS свойств до Javascript объектов и HTML элементов. Он также может использоваться для SVG и анимации букв, которая по-прежнему является очень редкой, но популярной функциональной особенностью для современных анимационных фреймворков. Мы видим много современных веб-сайтов, использующих SVG объекты, и хотя спрос на поддержку анимации в этой области очень высок, не так много фреймворков, которые могут отвечать потребностям спроса. Anime.js красиво заполняет этот пробел.

Анимированные заголовки

Animated Headlines

CodyHouse — бесплатная библиотека, предоставляющая разработчикам интерфейсные ресурсы в HTML, CSS и Javascript. В 2014 году их соучредитель разработал серию CSS эффектов для заголовков с вращающимися словами посредством скольжения, толкания, ввода и масштабирования. Это классное решение, если вы хотите послать сильное сообщение, сохранив исходную структуру заголовка и изменить последнее слово, как в приведенном выше примере.

Если вы предпочитаете копаться в коде, образец кода ниже великолепен, но если нет, не беспокойтесь, есть WordPress плагин, который тоже будет делать неплохие анимационные трюки.

В следующей серии:

Самые крутые анимационные текстовые эффекты во всем интернете, Часть 2: Вдохновение

VIA

   

Автор