Kotwica offsetowa - CSS-Tricks

Anonim

offset-anchorWłaściwość określa punkt w polu jest zastosowanie jako kotew, które przemieszcza się wzdłuż offset-path.

To trochę rozwlekłe, więc rozwiążmy to trochę.

Masz element, powiedzmy pudełko:

Zobacz Pen Orange Box autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Chcesz, żeby to pudełko poruszało się po ścieżce, powiedz falistą linię. Możemy utworzyć tę linię za pomocą SVG bezpośrednio w kodzie HTML i używając jej jako offset-pathramki. Animację tworzymy wykorzystując offset-distancenieruchomość:

Zobacz Pen Orange Square on Path autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Dobrze dobrze. Ale co, jeśli chcemy, aby pudełko wyglądało, jakby zwisało z linii? Wiesz, jak osoba przesuwająca się po tyrolce.

To jest, gdzie offset-anchorpojawia się! Zaznacza miejsce na elemencie i używa go do umieszczenia elementu na ścieżce.

Oto przykład, w którym trzy różne pola są dołączone do tej samej ścieżki w różnych punktach kontrolnych:

Zobacz Pen NMbEpy autorstwa Geoffa Grahama (@geoffgraham) na CodePen.

Składnia

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

Wartości

  • auto: Przyjmuje wartość offset-positiontak długo, jak ta wartość nie jest również autoi tak długo, jak offset-pathjest ustawiona na none.
  • position
    • : Jednostka, która jest obliczana na podstawie względnej szerokości i wysokości kontenera, w którym się znajduje. Na przykład 50% 50%będzie to punkt martwy. Zwróć uwagę, że słowa kluczowe działają tutaj, podobnie jak background-positiongdzie center centerzwróci ten sam wynik.
    • : Jednostka, która odsuwa kotwicę od lewego górnego rogu pola elementu.

Warto zauważyć, że positionjest to nieruchomość, którą można animować.

Wsparcie przeglądarki

W offset-*chwili pisania tego tekstu właściwości są nadal uważane za eksperymentalne. Jeśli obecny brak obsługi przeglądarek sprawia, że ​​wahasz się przed użyciem jej w projekcie, możesz rozważyć użycie GSAP na tym poziomie animacji. Zapewni to w tej chwili najszerszą obsługę przeglądarek.

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
46 72 Nie 79 Nie

Telefon komórkowy / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Nie

Od Chrome 46 i Opera 33 (i powiązanych wersji mobilnych) mamy „wstępne wsparcie” w Blink (bez flagi).

Dodatkowe informacje

  • Specyfikacja modułu ścieżki ruchu poziomu 1
  • Bilet do WebKit # 139128
  • Bilet Mozilli nr 1186329
  • Żądanie funkcji Microsoft Edge