Размещение текста по пути с помощью CSS и Motion Path

За последние пару месяцев я много играл с CSS Motion Path и получал массу удовольствия от создания демонстраций, некоторые из которых вы можете найти в этой коллекции Codepen. Но название «Motion Path» немного вводит в заблуждение, поскольку оно относится не только к движению. Фактически, хотя спецификация по-прежнему называется «Motion Path», свойство, используемое для определения пути, было изменено с motion-path на offset-path. Легко понять, почему: элемент может быть размещен в любом месте пути, с движением или без движения - его положение (или значение offset-distance) не нужно анимировать.

В следующей демонстрации масштаб и непрозрачность кругов анимированы, но на самом деле их положение неподвижно, несмотря на иллюзию движения. Тем не менее, каждый из них расположен вдоль кругового пути, используя offset-path иoffset-distance.

(Есть также маска conic-gradient, анимированная с помощью CSS Houdini - вам нужно просмотреть ее в Chrome, чтобы увидеть эффект.)

Эта способность размещать стационарные элементы вдоль пути хорошо подходит для текста. В прошлом году я создал несколько демонстраций, в которых использовал пользовательские свойства CSS для размещения текста по кругу, используя преобразования. В этом примере используется Splitting.js (моя любимая библиотека JS!) Для установки пользовательских свойств. (Подробнее об этом позже.)

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

Нам поможет Motion Path

Если вместо этого мы используем offset-path вычисление offset-distance значения для каждого символа с использованием пользовательских свойств, мы можем добиться того же эффекта с полностью выделяемым текстом!

К сожалению, на момент написания единственное поддерживаемое значение offset-path - это функция path(). Это не облегчает адаптивное построение, поскольку путь не масштабируется. Но есть варианты, такие как использование медиазапросов для указания разных значений пути для разных точек останова. В качестве альтернативы мы могли бы использовать преобразования, чтобы уменьшить масштаб всего изображения на небольших экранах. Но ни один из этих вариантов не идеален. Если бы мы могли использовать URL пути SVG (как указано в спецификации), то это дало бы намного более детальный контроль.

Слово о создании пути

Мой предпочтительный способ определения значения offset-path - нарисовать путь в Illustrator и сохранить его как SVG, прежде чем очистить его с помощью инструмента оптимизации и скопировать значение атрибута d. Если вы просто нарисуете круг, Illustrator сохранит его как элемент circle, а не как путь. Один из способов предотвратить это - сначала нарисовать круг, а затем с помощью инструмента-ножницы в Illustrator обрезать траекторию круга в нужном месте. Затем он будет сохранен как элемент path, а не как circle.

Конечно, мы не ограничены кругами. Мы можем использовать любой путь, который мы выберем.

Да, мы можем анимировать текст тоже

Анимация - то, где эти методы действительно потрясают. Мы можем анимировать offset-distance, чтобы переместить строку текста вдоль пути. Один из моих любимых приемов - использовать значения animation-delay, рассчитанные на основе пользовательских свойств. Splitting.js присваивает каждому символу собственное свойство, соответствующее его индексу. Передача этого в функцию calc приводит к более органичному движению, подобному эффектам замедления. Вы можете увидеть разницу в двух анимациях ниже. Вторая анимация реализует каждый символ с animation-delay, рассчитанный с использованием пользовательских свойств:

.char {
  --delay: calc(var(--char-index) * 30ms);
}

Это очень весело. Следующая демонстрация использует методы, описанные здесь, чтобы создать эффект американских горок:

Мы можем сделать еще более странный эффект и добавить некоторые 3D-преобразования в нашу анимацию: