Modal auf einem Pfad einfügen

Haben Sie schon diese schicken Interaktionen gesehen, bei denen ein Modalfenster von oben auf die Seite fliegt? Vielleicht gleitet es von der Seite herein, während es zu voller Deckkraft überblendet? Vielleicht fällt es von oben herein und wechselt von unscharf zu fokussiert? Ziemlich cool, wenn es zur Stimmung Ihrer Website passt.

Sie bewegen sich aber immer nur auf einer geraden Linie. Dank des ziemlich neuen offset-path muss das nicht mehr sein!

Die offset-path Eigenschaft in CSS existiert, damit Sie ein Element entlang eines Pfades positionieren können. Ähnlich der gleichen Pfadsyntax, die wir von SVG kennen.

Hier ist ein super einfacher Pfad. Buchstäblich nur zwei Anweisungen

<path d="M 250,100 S -300,500 -700,-200"></path>

Siehe den Pen Ein sehr einfacher Pfad. von Chris Coyier (@chriscoyier) auf CodePen.

Ich kann diese Pfaddaten direkt nach CSS übertragen und dort entlang eines Pfades animieren

Siehe den Pen Entlang eines Pfades animieren. von Chris Coyier (@chriscoyier) auf CodePen.

In diesem Fall war es eine @keyframe Animation, die die Bewegung ausführt, was im Grunde nur die Änderung des offset-distance Wertes ist.

Das animierte Element kann alles sein! Zum Beispiel ein Modal ;)

Siehe den Pen Modal auf Pfad bewegen von Chris Coyier (@chriscoyier) auf CodePen.

In diesem Fall keine @keyframes, nur eine transition und unterschiedliche Werte von offset-distance.

Vorsicht bei der Rotation!

Ich verwende hier offset-rotation: 0deg;, denn wenn ich es nicht täte, würde sich das Modal verdrehen, um sich entlang des Pfades auszurichten. Das ist sehr cool, dass das möglich ist, aber in diesem Fall ist es ungeschickt.

Fallback-Optionen

Diese Art von Sache ist leicht eine Verbesserung. Im vorliegenden Fall blenden wir auch die Deckkraft und die Skalierung aus, sodass ein Fallback automatisch gehandhabt wird. Sie könnten diese Dinge auch in eine @supports Anweisung einpacken, damit Sie alternative Möglichkeiten zum Ausblenden des Modals haben, falls offset-path nicht unterstützt wird.

/* Fallback hide/show stuff */
.modal {
  
}
.modal.hide {

}
/* If supported, path-based hiding/showing */
/* Might as well test the rotation feature, as it's also vital */
@supports (offset-rotation: 0deg) {
  .modal {
    offset-rotation: 0deg;
    offset-path: path("M 250,100 S -300,500 -700,-200");
  }
  .modal.hide {
    offset-distance: 100%;
  }
}

Reduzierte Bewegung handhaben

Nicht jeder bevorzugt Benutzeroberflächen mit viel Bewegung, und Browser können dem entgegenkommen. Wir können die Bewegung wie folgt entfernen

@media (prefers-reduced-motion) {
  .modal {
    offset-path: none;
  }
}

Ich könnte schwören, dass die Media Query vor ein, zwei Wochen noch funktioniert hat, aber im Moment kann ich sie in keinem Browser zum Laufen bringen, den ich ausprobiert habe (während ich die Einstellung auf OS-Ebene umschalte). Aber irgendwann wird sie funktionieren.

Wie beim anderen Fallback, stellen Sie sicher, dass Sie eine alternative Möglichkeit zum Ausblenden des Modals bereitstellen. Ich bin mir auch nicht ganz sicher, was hier die Best Practice ist. Vielleicht würden Sie, wenn Sie bewusst eine Erfahrung mit "reduzierter Bewegung" gestalten, auf gar keine Bewegung verzichten. Nur eine Anzeige von block/none.