Offset-Anker | CSS-Tricks

Die Eigenschaft offset-anchor definiert einen Punkt innerhalb des Kastens, auf den sie angewendet wird, als Anker, der sich entlang des offset-path bewegt.

Das ist etwas wortreich, also lassen wir das mal ein wenig aufschlüsseln.

Man hat ein Element, sagen wir einen Kasten

Siehe den Pen Orange Box von Geoff Graham (@geoffgraham) auf CodePen.

Man möchte, dass sich dieser Kasten entlang eines Pfades bewegt, sagen wir einer welligen Linie. Wir können diese Linie direkt mit SVG im HTML erstellen und sie als offset-path für den Kasten verwenden. Wir erstellen die Animation, indem wir die Eigenschaft offset-distance nutzen

Siehe den Pen Orange Square on Path von Geoff Graham (@geoffgraham) auf CodePen.

Gut, gut. Aber was ist, wenn wir wollen, dass der Kasten so aussieht, als würde er von der Linie hängen? Man kennt das, wie eine Person, die an einer Seilrutsche entlangrutscht.

Da kommt offset-anchor ins Spiel! Es markiert eine Stelle auf dem Element und nutzt diese, um das Element auf dem Pfad zu positionieren.

Hier ist ein Beispiel, bei dem drei verschiedene Kästen an unterschiedlichen Ankerpunkten an denselben Pfad angehängt sind

Siehe den Pen NMbEpy von Geoff Graham (@geoffgraham) auf CodePen.

Syntax

.box {
  offset-anchor: [auto | ];
}

Werte

auto: Nimmt den Wert von offset-position, solange dieser Wert nicht ebenfalls auto ist und solange offset-path auf none gesetzt ist.
position
- : Eine Einheit, die aus der relativen Breite und Höhe des Containers berechnet wird, in dem sie sich befindet. Zum Beispiel würde 50% 50% genau in der Mitte liegen. Beachten Sie, dass Schlüsselwörter hier funktionieren, genau wie bei background-position, wo center center dasselbe Ergebnis liefern würde.
- : Eine Einheit, die den Anker vom oberen linken Rand des Kastens des Elements versetzt.

Es ist erwähnenswert, dass position eine animierbare Eigenschaft ist.

Browser-Unterstützung

Die offset-*-Eigenschaften gelten zum Zeitpunkt der Erstellung dieses Textes immer noch als experimentelles Feature. Wenn Ihnen die mangelnde Browserunterstützung zögern lässt, es in einem Projekt zu verwenden, sollten Sie in Erwägung ziehen, GSAP für dieses Animationsniveau zu verwenden. Dies bietet Ihnen derzeit die größte Browserunterstützung.

Diese Daten zur Browserunterstützung stammen von Caniuse, wo Sie weitere Details finden. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version unterstützt.