Heim >Web-Frontend >CSS-Tutorial >CSS-Scrollzeigung mit Bewegungspräferenz
Durchsuchen Sie schnell die wichtigsten Punkte:
@scroll-timeline
in Chrome markiert. Bramus zeigt uns auch die leistungsstarke Verwendung dieser Funktion auf CSS-Tricks, insbesondere in Verbindung mit WAAPI.prefers-reduced-motion
Das einzige, was ich hinzufügen möchte, ist, dass prefers-reduced-motion
in Betracht gezogen werden muss, da diese Bildlaufanimation Menschen betreffen kann, die anfällig für Bewegungskrankheit sind. Dazu können Sie die Tests mit unterstützten Tests in JavaScript in derselben Zeile kombinieren:
Wenn ( ! ! window.matchmedia ('(bevorzugt-reduzierte Bewegung: Reduzierung).) Übereinstimmungen ) { // coole Effekte ausführen}
Ich bin mir nicht sicher, ob es besser ist, die Unpreferenz oder das Gegenteil der reduce
zu testen. In jedem Fall besteht der Trick in CSS darin, alles mit @scroll-timeline
und animation-timeline
in den @supports
-Test zu wickeln (falls Sie etwas anderes tun möchten) und dann diesen Test im Einstellungstest einwickeln:
@media (bevorzugt-reduzierte Bewegung: No-Preference) { @Supports (Animationszweile: funktioniert) { /* Führen Sie coole Effekte aus*/ } }
Es ist eine Demonstration, und die ganze Anerkennung für Bramus, der es geschafft hat.
Oh, weißt du? Wenn @when
zu einer Funktion wird, ist CSS prägnanter:
@When unterstützt (Animationszeit-Timeline: funktioniert) und Medien (bevorzugt-reduzierte Bewegung: No-Preference) { } @anders { }
Das obige ist der detaillierte Inhalt vonCSS-Scrollzeigung mit Bewegungspräferenz. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!