Слова звучат лучше, когда они оживают. Глядя на последние тенденции дизайна наклонных форм и заголовков, доминирующих в интернете, можно с уверенностью сказать, что есть много библиотек и шаблонов на выбор, когда дело доходит до внешнего вида веб-сайта. Но как насчет правильного посыла? Функциональность анимации заголовков может сочетаться с этими тенденциями, чтобы создать сильное и впечатляющее сообщение.
Однако мы объединили список лучшей, самой красивой и мощной текстовой анимации, которая придаст вашему сайту современный вид и посыл через сильное сообщение. Эти примеры можно использовать в качестве вдохновения для вашего следующего дизайн-проекта или как учебное пособие по прокачке навыков CSS3 и JavaScript.
Большинство из приведенных ниже эффектов анимации, были протестированы в разных браузерах и безопасны для использования на вашем сайте, в то время как другие являются экспериментальными проектами и созданы просто в качестве веселой тренировки.
Фреймворки
Креативная анимация SVG букв
Вот первый для кодера. Codrops — блог, которые предоставляют читателям учебные руководства, тенденции и вдохновение для веба. В марте 2016 года они опубликовали статью о том, как анимировать SVG буквы с использованием плагина Segment.
Помните, когда мы говорили об экспериментальной анимации? Этот туториал определенно подпадает под эту категорию. В статье рассказывается о демонстрационной анимации, её использовании, о том, как настроить шрифт и других о JavaScript библиотеках.
Также на Codrops есть целый ряд других примеров типографики для веба, которые заставят отвиснуть вашу челюсть.
TextFX2 – Текстовые анимации CSS3
Вы когда-нибудь слышали о CodeCanyon? Это собственная веб-библиотека Envato для плагинов и скриптов, созданных сообществом разработчиков с более чем 21 000 позиций на выбор. Одним из них является Text FX 2, — это генератор текстовой анимации, который очень легко использовать для создания собственной текстовой анимации. Этот плагин позволяет пользователю выбрать свой любимый шрифт, цвет, анимировать несколько строк текста и анимировать с чередующимися циклами. В основном вы выбираете, всё что хотите, а анимация текста выполняется через раскрывающихся меню, и для вас генерируется код. Очень просто!
Вот демо с несколькими примерами.
Крутые текстовые эффекты – Невероятная анимация
Если вы новичок в кодировании, то вот полностью адаптивная текстовая анимация которая подойдет вам (также, есть на CodeCanyon). Этот фрейворк позволяет вам выбирать HTML или Javascript для анимации и предоставляет библиотеку из 300 предварительно закодированных примеров, с помощью которых вы можете получить вдохновение или готовый код.
Затем файлы анимации можно импортировать в WordPress (ознакомьтесь с их руководством для WordPress), импорт происходит с поддержкой событий мыши и оптимизирован для SEO.
Некоторые из доступных функций:
- Адаптивный дизайн
- Анимация букв и слов
- Контроль скорости и колебания
- Полная совместимость со всеми современными браузерами и с запасным вариантом для старых браузеров
Anime.js
Anime.js — впечатляющий, быстрый и легкий JavaScript фреймворк, разработанный Джулианом Гарнье, который анимирует все что угодно от CSS свойств до Javascript объектов и HTML элементов. Он также может использоваться для SVG и анимации букв, которая по-прежнему является очень редкой, но популярной функциональной особенностью для современных анимационных фреймворков. Мы видим много современных веб-сайтов, использующих SVG объекты, и хотя спрос на поддержку анимации в этой области очень высок, не так много фреймворков, которые могут отвечать потребностям спроса. Anime.js красиво заполняет этот пробел.
Анимированные заголовки
CodyHouse — бесплатная библиотека, предоставляющая разработчикам интерфейсные ресурсы в HTML, CSS и Javascript. В 2014 году их соучредитель разработал серию CSS эффектов для заголовков с вращающимися словами посредством скольжения, толкания, ввода и масштабирования. Это классное решение, если вы хотите послать сильное сообщение, сохранив исходную структуру заголовка и изменить последнее слово, как в приведенном выше примере.
Если вы предпочитаете копаться в коде, образец кода ниже великолепен, но если нет, не беспокойтесь, есть WordPress плагин, который тоже будет делать неплохие анимационные трюки.
В следующей серии:
Самые крутые анимационные текстовые эффекты во всем интернете, Часть 2: Вдохновение
