Kopieren von Kommentaren mit CSS-Ankerpositionierung und Ansichtsanimationen

Die Ergebnisse der 2024 CSS -Statusumfrage wurden veröffentlicht und sind so faszinierend wie immer. Während jeder Abschnitt eine detaillierte Analyse verdient, konzentrieren wir uns normalerweise am meisten auf die Teile der am häufigsten verwendeten CSS-Merkmale. Wenn Sie daran interessiert sind, Artikel über die Webentwicklung zu schreiben (vielleicht können Sie mit uns mit dem Schreiben beginnen), möchten Sie insbesondere den Abschnitt "Leseliste" der Funktion überprüfen. Es enthält die Funktionen, die die Befragten nach Abschluss der Umfrage lesen möchten, die normalerweise aus den neuesten Funktionen mit weniger Community -Bewusstsein bestehen.

Eine Funktion, die mich erregt, ist meine oberste Wahl für 2024: CSS -Ankerpositionierung , der in der Umfrage den vierten Platz belegte. Sie finden die folgende -Scroll -Treiberanimation, eine weitere großartige Funktion, die in diesem Jahr einen Wide Browser -Support erhalten hat. Beide sind elegant und bieten ein gutes Entwicklererlebnis, aber die Kombination eröffnet neue Möglichkeiten, die die meisten Menschen im letzten Jahr in den Bereich von JavaScript fallen.

Ich möchte eine dieser Möglichkeiten präsentieren und diese beiden Merkmale mehr verstehen. Insbesondere erstellen wir einen Blog -Beitrag, in dem die Fußnoten neben jedem Textabsatz als Kommentare auftauchen.

Für diese Demonstration sind unsere Anforderungen wie folgt:

Fußnote taucht auf, wenn es in den Bildschirm eintritt.
Befestigen Sie sie am entsprechenden Text.
Fußnoten befinden sich auf beiden Seiten des Bildschirms, daher benötigen wir eine mobile Backup -Lösung.

Grundlagen

Erstens verwenden wir die folgenden Beispiele für das gemeinsame Blog -Postlayout: Titel, Titelbild und Körper:

Das einzige, was zu beachten ist, ist, dass wir gelegentlich einen Absatz mit Fußnoten haben:

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

Fußnote lagern

In dieser Demonstration befindet sich die Fußnote im Körper des Artikels, unmittelbar nach dem Text, den wir kommentieren möchten. Wir möchten jedoch, dass sie neben dem Text als schwimmende Blasen befestigt werden. In der Vergangenheit müssen wir möglicherweise eine Kombination aus absoluter und relativer Positionierung verwenden und für jede Fußnote das richtige Randattribut finden.

Wir können dies jedoch mithilfe der Ankerpositionierung tun, eine Funktion, mit der wir absolut positionierte Elemente in Bezug auf andere Elemente positionieren können - nicht nur im Verhältnis zum Containerkontext, in dem sie sich befinden. Wir werden für eine Weile über "Anker" und "Ziel" sprechen, sodass einige Begriffe zu Beginn benötigt werden:

• Ankerpunkt: Dies ist das Element, das als Verweis auf die Position anderer Elemente verwendet wird, daher der Name Ankerpunkt.
• Ziel: Dies ist ein absolutes Positionierungselement, das relativ zu einem oder mehreren Ankerpunkten positioniert ist. Das Ziel ist der Name, den wir von nun an verwenden, aber in anderen Ressourcen finden Sie es oft nur "absolut positionierte Elemente".

Ich werde nicht im Detail in jedes Detail eingehen, aber wenn Sie mehr wissen möchten, empfehle ich unseren Ankerpositionierungshandbuch mit vollständigen Informationen und Beispielen.

Anker und Ziele

Es ist leicht zu wissen, dass jedes .footnote ein Zielelement ist. Die Auswahl unserer Ankerpunkte erfordert jedoch mehr Nuancen. Es scheint zwar, dass jedes .note Element ein Ankerelement sein sollte, aber es ist besser, das gesamte .post als Anker zu wählen. Wenn wir die Position von .footnote in die absolute Position setzen, werde ich sie erklären:

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

Sie werden feststellen, dass die .footnote -Elemente im Artikel aus dem normalen Dokumentstrom entfernt wurden und sie visuell über ihre .note -Elemente schweben. Das sind gute Nachrichten! Da sie bereits auf der vertikalen Achse ausgerichtet sind, müssen wir den Artikel nur als Anker verwenden und auf der horizontalen Achse zur Seite bewegen.

Zu diesem Zeitpunkt müssen wir die richtigen Margenattribute finden, um sie auf beiden Seiten zu platzieren. Obwohl dies machbar ist, ist es eine schmerzhafte Wahl, weil:

1. Sie müssen sich auf eine magische Zahl verlassen.
2. Es hängt vom Ansichtsfenster ab.
3. Es hängt vom Inhalt der Fußnote ab, da es seine Breite ändert.

Das

Element ist standardmäßig kein Anker. Um einen Artikel als Anker zu registrieren, müssen wir die Eigenschaft anchor-name verwenden und ihm eine kurze horizontale Kennung (ein benutzerdefinierter Name beginnen, der mit zwei kurzen horizontalen Zeilen beginnt) als Name.

<code>.footnote {
  position: absolute;
}</code>

In diesem Fall wird unser Zielelement .footnote sein. Um das Zielelement zu verwenden, können wir die absolute Positionierung bewahren und das Ankerelement mit der Eigenschaft position-anchor auswählen, die die kurze horizontale Linienkennung des Ankers nimmt. Dies macht .post zum Standard -Ankerpunkt für das Ziel im nächsten Schritt.

<code>.post {
  anchor-name: --post;
}</code>

Ziel verschieben

Anstatt einen Randwert für das Attribut .footnote oder left right auszuwählen, können wir die Funktion anchor() verwenden. Es gibt einen <length></length> -Werg, der die Position auf einer Seite des Ankerpunkts darstellt, sodass wir die Margeneigenschaft des Ziels immer korrekt einstellen können. So können wir die linke Seite des Ziels an die rechte Seite des Ankerpunkts anschließen und umgekehrt:

<code>.footnote {
  position: absolute;
  position-anchor: --post;
}</code>

Sie werden jedoch feststellen, dass es auf einer Seite des Artikels steckt, ohne Platz in der Mitte. Glücklicherweise funktioniert das margin Attribut genauso wie Sie das Zielelement ansprechen möchten, und hinterlässt einen Platz zwischen dem Fußnotenziel und dem Postanker. Wir können auch mehr Stile hinzufügen, um das Aussehen schöner zu machen:

<code>.footnote {
  position: absolute;
  position-anchor: --post;

  /* 将它们放在右侧 */
  left: anchor(right);

  /* 或将它们放在左侧 */
  right: anchor(left);

  /* 每次只使用其中一个！ */
}</code>

Schließlich befinden sich alle .footnote Elemente auf derselben Seite des Artikels, und wenn wir sie auf jeder Seite ordnen möchten, können wir den nth-of-type() -Auskörper verwenden, um ungerade und sogar Anmerkungen auszuwählen und auf den gegenüberliegenden Seiten einzustellen.

<code>.footnote {
  /* ... */

  background-color: #fff;
  border-radius: 20px;
  margin: 0px 20px;
  padding: 20px;
}</code>

verwenden wir nth-of-type() anstelle von nth-child, weil wir nur die .note Elemente anstelle aller Geschwisterelemente iterieren wollen.

Denken Sie daran, die letzte Margin -Anweisung aus .footnote und dann Voice zu entfernen! Unsere Fußnoten befinden sich auf jeder Seite. Sie werden feststellen, dass ich für jede Fußnote auch ein kleines Dreieck hinzugefügt habe, aber dies geht über den Rahmen dieses Artikels hinaus:

Ansicht animation

Lassen Sie uns Popup-Animationen erstellen. Ich fand, dass dies der einfachste Teil ist, da sowohl die Aussicht als auch die Scroll-Drive-Animation so intuitiv wie möglich sind. Wir werden zuerst die Animation mit dem gemeinsamen @keyframes registrieren. Was wir wollen, ist, unsere Fußnote von unsichtbar zu beginnen und dann langsam größer und sichtbar zu werden:

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

Dies ist unsere Animation, jetzt müssen wir sie nur zu jedem .footnote:

hinzufügen

<code>.footnote {
  position: absolute;
}</code>

Dies selbst tut nichts. Normalerweise setzen wir ein animation-duration damit, dass es startet. Die Animation der Ansicht wird jedoch nicht durch die festgelegte Zeit ausgeführt, aber der Animationsfortschritt hängt von der Position des Elements auf dem Bildschirm ab. Dazu setzen wir animation-timeline auf view().

<code>.post {
  anchor-name: --post;
}</code>

Dies führt dazu, dass die Animation endet, wenn das Element den Bildschirm verlässt. Wir möchten, dass es in einer lesbaren Position endet. Die letzte Note besteht darin, animation-range auf cover 0% cover 40% zu setzen. Dies bedeutet: "Ich möchte, dass das Element die Animation startet, wenn es 0% in der Ansicht ist, und enden, wenn es 40% in der Ansicht ist."

<code>.footnote {
  position: absolute;
  position-anchor: --post;
}</code>

Bramus 'erstaunliches Tool konzentriert sich mehr auf Scrollen- und View-gesteuerte Animationen, was besser zeigt, wie die Eigenschaften animation-range funktionieren.

Was soll ich tun, wenn ich das mobile Terminal ausführe?

Sie haben möglicherweise festgestellt, dass diese Fußnote -Methode auf kleineren Bildschirmen nicht funktioniert, da auf beiden Seiten des Artikels kein Platz vorhanden ist. Das Fix ist sehr einfach. Wir möchten, dass die Fußnoten als normale Fußnoten auf kleinen Bildschirmen und als Kommentare zu großen Bildschirmen angezeigt werden, die wir tun können, indem wir unsere Kommentare nur dann zeigen, wenn der Bildschirm größer als ein bestimmter Schwellenwert ist (ca. 1000 Pixel). Wenn nicht, erscheinen die Kommentare im Körper des Artikels wie alle anderen Kommentare, die Sie im Web finden.

<code>.footnote {
  position: absolute;
  position-anchor: --post;

  /* 将它们放在右侧 */
  left: anchor(right);

  /* 或将它们放在左侧 */
  right: anchor(left);

  /* 每次只使用其中一个！ */
}</code>

Jetzt werden unsere Kommentare nur auf beiden Seiten angezeigt, wenn genügend Speicherplatz vorhanden ist:

Zusammenfassung

Wenn Sie auch gerne Inhalte schreiben, für die Sie sich leidenschaftlich interessieren, werden Sie sich oft in zufällige Tangenten eingehen oder jedem Absatz Kommentare hinzufügen, um einen zusätzlichen Kontext bereitzustellen. Zumindest ist das mein Fall, so dass es eine gute Ergänzung ist, Kommentare dynamisch anzuzeigen. Besonders wenn wir dies nur mit CSS tun können - dies ist etwas, was wir vor einem Jahr nicht tun konnten!

Das obige ist der detaillierte Inhalt vonKopieren von Kommentaren mit CSS-Ankerpositionierung und Ansichtsanimationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!