首頁 >web前端 >css教學 >CSS滾動式式運動偏愛

CSS滾動式式運動偏愛

Christopher Nolan
Christopher Nolan原創
2025-03-14 10:39:12466瀏覽

CSS Scroll-Timeline With Motion Preference

快速瀏覽要點:

  • 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-timelineanimation-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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn