Офсет-анкер - CSS-хитрощі

Anonim

offset-anchorВластивість визначає точку всередині коробки вона застосовується в якості якоря , який рухається уздовж offset-path.

Це якось багатослівно, тож давайте трохи розберемо це.

У вас є елемент, скажімо поле:

Дивіться Помаранчеву коробку від Джеффа Грема (@geoffgraham) на CodePen.

Ви хочете, щоб ця коробка рухалася по доріжці, скажімо, кривлячись. Ми можемо зробити цей рядок за допомогою SVG безпосередньо в HTML і використовувати його як offset-pathполе. Ми створюємо анімацію, використовуючи offset-distanceвластивість:

Дивіться Помаранчеву площу пера на Шлях від Джеффа Грема (@geoffgraham) на CodePen.

Добре-добре. Але що, якщо ми хочемо, щоб коробка виглядала так, ніби вона звисає з лінії? Знаєте, як людина, ковзаюча по лінії застібки.

Ось де offset-anchorзаходить! Він позначає місце на елементі і використовує це для позиціонування елемента на шляху.

Ось приклад, коли три різні коробки приєднані до одного шляху в різних опорних точках:

Дивіться Pen NMbEpy від Geoff Graham (@geoffgraham) на CodePen.

Синтаксис

.box ( offset-anchor: (auto | ); )

Цінності

  • auto: Приймає значення до offset-positionтих пір, поки це значення також не є autoі доки offset-pathвстановлено значення none.
  • position
    • : Одиниця виміру, яка обчислюється на основі відносної ширини та висоти контейнера, в якому вона знаходиться. Наприклад, 50% 50%буде мертва точка. Зверніть увагу, що ключові слова тут працюють, як і background-positionде center centerб повернули той самий результат.
    • : Одиниця, яка зміщує якір з верхнього лівого кута вікна елемента.

Варто зазначити, що positionце анімаційна властивість.

Підтримка браузера

На offset-*момент написання статті властивості досі вважаються експериментальною особливістю. Якщо в даний час через відсутність підтримки браузера ви вагаєтесь використовувати її в проекті, можливо, ви захочете розглянути можливість використання GSAP для цього рівня анімації. Це запропонує вам найширшу підтримку браузера на даний момент.

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox 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