Размещение текста по заданной траектории с помощью CSS

Перевод статьи Michelle Barker: Positioning Text Along a Path with CSS
Взято отсюда http://odinokun.com/2020-03-31-razmeshenie-teksta-po-zadannoj-traektorii-s-pomoshyu-css.html

Motion Path

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

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

See the pen (@michellebarker) on CodePen.

Есть также conic-gradient маска, анимированная с помощью CSS Houdini - но, полноценно, она работает только в Chrome.

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

See the pen (@michellebarker) on CodePen.

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

Motion Path - спасение

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

See the pen (@michellebarker) on CodePen.

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

Немного про определение траектории

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

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

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

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

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

See the pen (@michellebarker) on CodePen.

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

See the pen (@michellebarker) on CodePen.

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

See the pen (@michellebarker) on CodePen.

Надеюсь, вам нравится играть с Motion Path так же, как и мне!

Ещё ссылочки по теме CSS motion path

Ваше сообщение отправлено

Мы используем cookies, в том числе для аналитики