CSS

Анимация переменных шрифтов с помощью CSS и Splitting JS

От автора: некоторое время назад я создал на Codepen демо-версию анимированного переменного шрифта. В этой статье я объясню, что такое переменные шрифты, как можно сделать их анимацию, и как я создал этот потрясающий эффект с помощью CSS и немного Javascript.

Представляем переменные шрифты

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

Один шрифт, много вариаций

Вместо нескольких ширин шрифтов, которые доступны только с кратностью 100 (например font-weight: 600), переменные шрифты предоставляют диапазон значений, все из одного файла. Толщина может варьироваться в пределах диапазона. Так что font-weight: 372 — это вполне доступно!

Оси вариаций

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

толщина (wght)

ширина (wdth)

курсив (ital)

наклон (slnt)

оптический размер (opsz)

Они соответствуют CSS-свойствам и значениям:

font-weight

font-stretch

font-style

font-optical-sizing

Не все переменные шрифты содержат все эти оси вариаций. Многие содержат только одну или две. Они также могут быть доступны с помощью свойства font-variation-settings. Это свойство позволяет настраивать не только стандартные оси, но и пользовательские. Так font-weight можно указать двумя способами:

или же

font-variation-settings:’wght’372;

Пользовательские оси

Пользовательские оси предоставляют дизайнеру шрифтов неограниченные возможности для творчества! Пользовательская ось вариации может быть буквально чем угодно — некоторые, такие как x-height, могут быть довольно распространенными для гарнитуры, но существует гораздо больше творческих возможностей.

Пользовательские оси могут быть доступны с помощью свойства font-variation-settings, но, для отличия от стандартных осей, их четырехбуквенное имя тега должно быть в верхнем регистре. Переменный шрифт Movement от NM Type предоставляет пользовательскую ось с именем space, которая контролирует кривизну формы буквы.

Мы могли бы использовать «font-weight», чтобы обеспечить запасной вариант для браузеров, которые не поддерживают переменные шрифты.

font-variation-settings:'wght'200,'SPAC'118;

Попробуйте поэкспериментировать с разными осями в этой демонстрации:

Анимация переменного шрифта с помощью CSS

font-variation-settings является анимируемым, и поскольку оно охватывает диапазон значений, а не приращения с шагом 100, мы можем получить некоторые действительно красивые эффекты с помощью простых переходов CSS или анимации ключевых кадров. Шрифт IBM Plex Sans имеет две оси вариаций: толщина и ширина. Следующий код устанавливает анимацию с циклом в 1 секунду для обеих осей:

h1 {

font-variation-settings:'wght'100,'wdth'85;

animation:breathe4000msinfiniteforwards;

}

@keyframes breathe {

60% {

font-variation-settings:'wght'700,'wdth'100;

}

100% {

font-variation-settings:'wght'100,'wdth'85;

}

}

Это дает эффект вдоха и выдоха текста!

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

Потрясающая анимация

Вместо того, чтобы анатомировался весь текст с одинаковой скоростью, было бы неплохо, чтобы наши формы букв анимировались последовательно. Мы могли бы обернуть каждую букву текста в span и установить для каждого animation-delay:

<h1>

<span>B</span>

<span>r</span>

<span>e</span>

<span>a</span>

<span>t</span>

<span>h</span>

<span>i</span>

<span>n</span>

<span>g</span>

</h1>

h1 span:nth-child(2) {

animation-delay:400ms;

}

h1 span:nth-child(3) {

animation-delay:800ms;

}

h1 span:nth-child(4) {

animation-delay:1200ms;

}

/* etc...*/

Это немного долго писать (хотя мы могли бы использовать Sass), и это было бы не очень удобно, если бы мы решили позже изменить текстовый контент.

Но если вы не возражаем против использования Javascript, есть отличная библиотека Splitting.js, которая идеально для этого подходит!

Splitting

Основной вариант использования Splitting — анимация текста, хотя также возможно разделить сетки и макеты для получения некоторых интересных эффектов. Чтобы использовать ее, нам нужно включить библиотеку в проект, а затем установить для элемента, который мы хотели бы анимировать, атрибут data-splitting:

<h1 data-splitting>Breathing</h1>

Теперь JS, который нам нужно написать, очень прост:

Затем Splitting разбивает наш текстовый элемент на серию span, каждый с классом, атрибутом данных и определением пользовательского свойства со значением индекса символа, к которому мы затем можем обратиться в CSS:

<span class="word"data-word="Breathing"style="--word-index:0;">

<span class="char"data-char="B"style="--char-index:0;">B</span>

<span class="char"data-char="r"style="--char-index:1;">r</span>

<span class="char"data-char="e"style="--char-index:2;">e</span>

<span class="char"data-char="a"style="--char-index:3;">a</span>

<span class="char"data-char="t"style="--char-index:4;">t</span>

<span class="char"data-char="h"style="--char-index:5;">h</span>

<span class="char"data-char="i"style="--char-index:6;">i</span>

<span class="char"data-char="n"style="--char-index:7;">n</span>

<span class="char"data-char="g"style="--char-index:8;">g</span>

</span>

Чтобы создать последовательную анимацию, мы можем использовать calc() для вычисления значения animation-delay для каждой буквы из пользовательского свойства:

h1 .char {

--delay:calc((var(--char-index)+1)*400ms);

animation:breathe4000msinfiniteboth;

animation-delay:var(--delay);

}

Это существенно сокращает CSS, который нам нужно написать, и означает, что мы могли бы изменить текст позже и при этом наша анимация работала бы отлично!

Ресурсы

Руководство по переменным шрифтам MDN

Руководство MDN — отличный ресурс для изучения переменных шрифтов и того, как их использовать.

V-Fonts

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

Axis-Praxis

Axis-Praxis — это площадка для экспериментов с различными шрифтами, что поможет понять их доступные возможности. Она включает в себя несколько действительно интересных и креативных образцов!

VariableFonts.dev

Variablefonts.dev — это проект Мэнди Майкла, который известен в мире CSS тем, что создает впечатляющие демо с переменными шрифтами и рассказывает о них по всему миру.