Versatzanker - CSS-Tricks

Anonim

Die offset-anchorEigenschaft definiert einen Punkt innerhalb des Felds, auf das sie als Anker angewendet wird, der sich entlang des Felds bewegt offset-path.

Das ist ein bisschen wortreich, also lasst uns das ein bisschen zusammenfassen.

Sie haben ein Element, sagen wir eine Box:

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

Sie möchten, dass sich diese Box entlang eines Pfades bewegt, z. B. einer verschnörkelten Linie. Wir können diese Zeile mit SVG direkt im HTML-Code erstellen und als offset-pathBox verwenden. Wir erstellen die Animation unter Verwendung der offset-distanceEigenschaft:

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

Gut gut. Aber was ist, wenn die Box so aussehen soll, als würde sie von der Leine hängen? Sie wissen, wie eine Person, die entlang einer Seilrutsche rutscht.

Da kommt da offset-anchorrein! Es markiert einen Punkt auf dem Element und verwendet diesen, um das Element auf dem Pfad zu positionieren.

Hier ist ein Beispiel, in dem drei verschiedene Boxen an verschiedenen 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 einen Wert von offset-position, solange dieser Wert nicht auch ist autound solange er offset-patheingestellt ist none.
  • position
    • : Eine Einheit, die aus der relativen Breite und Höhe des Containers berechnet wird, in dem sie sich befindet. Zum Beispiel 50% 50%wäre der Totpunkt. Beachten Sie, dass Schlüsselwörter hier funktionieren, genau wie background-positionwo center centerdas gleiche Ergebnis zurückgegeben wird.
    • : Eine Einheit, die den Anker von der oberen linken Ecke der Elementbox versetzt.

Es ist erwähnenswert, dass dies positioneine animierbare Eigenschaft ist.

Browser-Unterstützung

Die offset-*Eigenschaften werden zum Zeitpunkt dieses Schreibens noch als experimentelles Merkmal angesehen. Wenn Sie aufgrund der derzeitigen mangelnden Browserunterstützung zögern, diese für ein Projekt zu verwenden, sollten Sie GSAP für diese Animationsstufe verwenden. Dies bietet Ihnen derzeit die umfassendste Browserunterstützung.

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
46 72 Nein 79 Nein

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Nein

Ab Chrome 46 und Opera 33 (und den zugehörigen mobilen Versionen) haben wir "anfängliche Unterstützung" in Blink (keine Flagge).

zusätzliche Information

  • Spezifikation des Bewegungspfadmoduls Stufe 1
  • WebKit Ticket # 139128
  • Mozilla Ticket # 1186329
  • Microsoft Edge-Funktionsanforderung