CSS Scroll-Timeline With Motion Preference

Quickly browse the key points:

• Mary Lou released a typical Codrops style demo called "Alternate Column Scroll".
• The scrolling effect is powered by Locomotive Scroll, which we have covered by coincidence before.
• Bramus has been exploring the use of future CSS Scroll-Timeline capabilities to achieve native CSS scrolling effects. He wrote a four-part in-depth series for this, starting from here.
• Although it is still in its early stages, @scroll-timeline has been marked in Chrome. Bramus also shows us the powerful use of this feature on CSS-Tricks, especially when used in conjunction with WAAPI.
• Therefore, Bramus set out to reconstruct the scrolling aspect of the presentation (the middle columns scroll naturally and the outer two columns scroll in reverse). It turns out that you can use polyfill and add some WAAPI to copy it nicely. Very cool.

Using CSS Scroll-Timeline in combination with prefers-reduced-motion

The only thing I want to add is that prefers-reduced-motion property needs to be considered, as this scrolling animation may affect people who are prone to motion sickness. To do this, you can combine the tests with supported tests in JavaScript on the same line:

 if (
    !CSS.supports("animation-timeline: foo") && 
    !window.matchMedia('(prefers-reduced-motion: reduce)').matches
   ) {
     // Execute cool effects}

I'm not sure it's better to test the unpreference or the reverse of reduce . Either way, the trick in CSS is to wrap whatever you want to do with @scroll-timeline and animation-timeline in the @supports test (if you want to do something else), and then wrap that test in the preferences test:

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

    @supports (animation-timeline: works) {

      /* Execute cool effects*/

    }

}

It's a demonstration, and all the credit is to Bramus, who made it happen.

Oh, you know? If @when becomes a feature, CSS will be more concise:

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

} @else {

}

The above is the detailed content of CSS Scroll-Timeline With Motion Preference. For more information, please follow other related articles on the PHP Chinese website!