CSS滾動式式運動偏愛

快速瀏覽要點：

• Mary Lou 發布了一個典型的Codrops 風格演示，名為“Alternate Column Scroll”。
• 滾動效果由Locomotive Scroll 提供支持，我們之前也巧合地介紹過它。
• Bramus 一直在探索使用未來的CSS Scroll-Timeline 功能實現原生CSS 滾動效果。他為此撰寫了一個四部分的深入探討系列文章，從這裡開始。
• 雖然還處於早期階段，但在Chrome 中已經標記了@scroll-timeline 。 Bramus 也向我們展示了此功能在CSS-Tricks 上的強大用途，尤其是在與WAAPI 結合使用時。
• 因此，Bramus 著手重建演示的滾動方面（中間列自然滾動，外側兩列反向滾動）。事實證明，您可以使用polyfill 並添加一些WAAPI 來很好地複制它。很酷。

結合prefers-reduced-motion使用CSS Scroll-Timeline

我唯一要補充的是，需要考慮prefers-reduced-motion屬性，因為這種滾動動畫可能會影響容易暈動的人。為此，您可以將測試與JavaScript 中的支持測試結合在同一行：

 if (
    !CSS.supports("animation-timeline: foo") && 
    !window.matchMedia('(prefers-reduced-motion: reduce)').matches
   ) {
     // 執行炫酷效果}

我不確定最好是測試無偏好設置還是reduce的反面。無論哪種方式，CSS 中的技巧是將您要使用@scroll-timeline和animation-timeline執行的任何操作都包裝在@supports測試中（如果您想執行其他操作），然後將該測試包裝在偏好設置測試中：

 @media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: works) {

      /* 執行炫酷效果*/

    }

}

這是一個演示，所有功勞都歸於Bramus，是他讓這一切得以實現。

哦，你知道嗎？如果@when成為一項功能，CSS 會變得更簡潔：

 @when supports(animation-timeline: works) and media(prefers-reduced-motion: no-preference) {

} @else {

}

以上是CSS滾動式式運動偏愛的詳細內容。更多資訊請關注PHP中文網其他相關文章！