offset-anchor
Свойство определяет точку внутри коробки она применяется в качестве якоря , который движется вдоль offset-path
.
Это довольно многословно, так что давайте разберемся с этим немного.
У вас есть элемент, скажем, коробка:
Смотрите коробку Pen Orange Box Джеффа Грэма (@geoffgraham) на CodePen.
Вы хотите, чтобы эта коробка двигалась по пути, скажем, по волнистой линии. Мы можем сделать эту строку с SVG прямо в HTML и использовать ее как offset-path
поле. Мы создаем анимацию, используя offset-distance
свойство:
Посмотрите на Pen Orange Square on Path Джеффа Грэма (@geoffgraham) на CodePen.
Хорошо хорошо. Но что, если мы хотим, чтобы коробка выглядела так, будто она висит на конвейере? Вы знаете, как человек, скользящий по тросу.
Вот где offset-anchor
пригодится! Он отмечает точку на элементе и использует ее для размещения элемента на пути.
Вот пример, когда три разных прямоугольника прикреплены к одному и тому же пути в разных точках привязки:
См. Pen NMbEpy Джеффа Грэма (@geoffgraham) на CodePen.
Синтаксис
.box ( offset-anchor: (auto | ); )
Значения
auto
: Принимает значение доoffset-position
тех пор, пока это значение не равно,auto
и покаoffset-path
установлено значениеnone
.position
: Единица измерения, рассчитываемая на основе относительной ширины и высоты контейнера, в котором она находится. Например,
50% 50%
это будет мертвая точка. Обратите внимание, что ключевые слова здесь работают точно так же, какbackground-position
wherecenter center
вернет тот же результат.: Единица измерения, которая смещает якорь от верхнего левого угла рамки элемента.
Стоит отметить, что position
это свойство, которое можно анимировать.
Поддержка браузера
На offset-*
момент написания этой статьи свойства все еще считаются экспериментальной функцией. Если текущее отсутствие поддержки браузера заставляет вас не решаться использовать его в проекте, тогда вы можете рассмотреть возможность использования GSAP для этого уровня анимации. Это предложит вам самую широкую поддержку браузера на данный момент.
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
Хром | Fire Fox | IE | Край | Сафари |
---|---|---|---|---|
46 | 72 | Нет | 79 | Нет |
Мобильный / планшет
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 81 год | Нет |
Начиная с Chrome 46 и Opera 33 (и связанных с ними мобильных версий) у нас есть «начальная поддержка» в Blink (без флага).
Дополнительная информация
- Спецификация модуля пути движения уровня 1
- Билет WebKit № 139128
- Билет Mozilla № 1186329
- Запрос функции Microsoft Edge