CSS-Scrollzeigung mit Bewegungspräferenz

Durchsuchen Sie schnell die wichtigsten Punkte:

• Mary Lou veröffentlichte eine typische Demo im Codrops -Stil namens "Alternate Column Scroll".
• Der Bildlaufeffekt wird durch Lokomotive -Schriftrolle angetrieben, die wir zuvor durch Zufall abgedeckt haben.
• Bramus untersucht die Verwendung zukünftiger CSS-Scroll-Diplom-Funktionen, um native CSS-Scrolling-Effekte zu erzielen. Er schrieb eine vierteilige eingehende Serie dafür, beginnend von hier aus.
• Obwohl es sich noch in den frühen Stadien befindet, wurde @scroll-timeline in Chrome markiert. Bramus zeigt uns auch die leistungsstarke Verwendung dieser Funktion auf CSS-Tricks, insbesondere in Verbindung mit WAAPI.
• Daher machte sich Bramus auf den Weg, um den Bildlaufaspekt der Präsentation zu rekonstruieren (die mittleren Spalten scrollen natürliche und die beiden äußeren Spalten umgekehrt). Es stellt sich heraus, dass Sie Polyfill verwenden und einige WAAPI hinzufügen können, um es gut zu kopieren. Sehr cool.

Verwenden der CSS-Scroll-Diplomeline in Kombination mit 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!