Приведите свой текст в движение с помощью этих ослепительных эффектов

Тенденция приводить все в движение правит балом в наши дни. Вы не можете не следовать этому безумию и развить навязчивую идею вдохнуть жизнь в каждую деталь веб-сайта. Эпоха статики ушла. Все динамично. И знаешь, что? Пользователи прекрасно это понимают.

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

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

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

Сокрушительная текстовая анимация Арсена Збиднякова

Просто посмотрите на Shattering Text Animation Арсена Збиднякова. Разве это не гениально? Решение не перегружает посетителей большим количеством действий и ненужной динамикой и не перегружает вашу систему. Это просто работает, оставляя всех в состоянии «вау».

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

Текстовая анимация Сени Задворных

Как и в нашем первом примере, этот фрагмент кода демонстрирует анимацию сборки и разборки текста. Однако на этот раз художник использует Three.js, чтобы воплотить все в жизнь. Это еще один контролируемый взрыв. Да, вы меня правильно поняли: вы также можете контролировать скорость анимации, щелкая и перетаскивая. И если вам нравится этот эксперимент, у Szenia есть еще несколько занимательных примеров. Просто посмотрите его профиль.

Шрифт моушн-графики и еще один эксперимент Ара

У Ара есть несколько умопомрачительных экспериментов с типографикой. Оба следующих примера абстрактны, основаны на геометрических манипуляциях и выглядят и выглядят высокотехнологичными. В чем-то они даже немного странные.

В первом примере текст состоит из крошечных кусочков, которые медленно, но верно образуют трехмерный туннель из частиц.

Во втором каждый символ строится из примитивных многоугольников, таких как треугольники, квадраты и прямоугольники, которые приводятся в движение. Такое ощущение, что чья-то цифровая рука сплетает все это вместе.

Текстовая анимация GSAP от Нейта Уайли

Нейт Уайли использовал Split Text из Greensock в своих интересах, воссоздав изумительную текстовую анимацию. Он берет обычный текст и разбивает его на мелкие фрагменты, каждый из которых является символом. После взрыва персонажи движутся в разных направлениях и плавно исчезают.

CSS Motion Typography: взрывающийся текст Дадли Стори

В отличие от предыдущих примеров, где за красотой решений стоят передовые технологии, здесь правит бал движение на основе CSS. Дадли Стори использует анимацию ключевых кадров CSS, переходы, JavaScript, SVG и немного магии Adobe Illustrator. Слово немного рассыпается, а затем разбивается на многоугольные части таким образом, что вы все еще можете его прочитать. Если вы хотите добавить своей типографике стильной брутальности, этот эффект, безусловно, станет отправной точкой.

Множество иконок в 3D с использованием Three.js от Yasunobu Ikeda

В то время как Нейт Уайли сдувает текст, Ясунобу Икэда, наоборот, заставляет частицы, хаотично разбросанные по экрану, формироваться в текст. Здесь частицы — не что иное, как крошечные значки. Автор использует Three.js для воссоздания этой великолепной 3D-анимации.

Анимированный текст SVG Path от Тамино Мартиниуса

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

Для более практичного использования

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

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

Цикл «Думай – создавай» Микаэля Айналема

Ручка Микаэля Айналема показывает циклическую анимацию, в которой слова выделяются по очереди. Это отличный способ направлять пользователей от одного слова к другому.

ПРЕСС от Tryggvi Gylfason

Tryggvi Gylfason добавляет движущуюся линию, которая скользит слева направо и заставляет буквы следовать за ней, тем самым либо нажимая, либо вытягивая символы слова. Эффект небольшой, но захватывающий.

Размытие движения при прокрутке текста с помощью TweenMax от Ignacio Correia

Игнасио Коррейя добавляет к тексту эффект размытия в движении. При быстром движении вниз текст расплывается почти белым пятном. Когда вы замедляетесь, слова становятся менее неясными.

Пример использования анимации в типографике

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

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