CSS Scroll-Timeline avec une préférence de mouvement

Parcourez rapidement les points clés:

• Mary Lou a publié une démo de style Codrops typique appelé "Scroll de colonne alternative".
• L'effet de défilement est propulsé par le parchemin de locomotive, que nous avons couvert par la coïncidence auparavant.
• Bramus a exploré l'utilisation des futures capacités de décalage CSS pour réaliser des effets de défilement CSS natifs. Il a écrit une série approfondie en quatre parties pour cela, à partir d'ici.
• Bien qu'il en soit encore à ses débuts, @scroll-timeline a été marqué en Chrome. Bramus nous montre également l'utilisation puissante de cette fonctionnalité sur CSS-Tricks, en particulier lorsqu'elle est utilisée en conjonction avec WAAPI.
• Par conséquent, Bramus a décidé de reconstruire l'aspect de défilement de la présentation (les colonnes moyennes font défiler naturellement et les deux colonnes externes font défiler en sens inverse). Il s'avère que vous pouvez utiliser Polyfill et ajouter du waapi pour le copier bien. Très cool.

Utilisation de CSS Scroll-Timeline en combinaison avec prefers-reduced-motion

La seule chose que je veux ajouter, c'est que prefers-reduced-motion doit être prise en compte, car cette animation de défilement peut affecter les personnes sujettes au mal des transports. Pour ce faire, vous pouvez combiner les tests avec des tests pris en charge en JavaScript sur la même ligne:

 si (
    ! CSS.Supports ("Animation-Timeline: FOO") && 
    ! window.matchMedia ('(préfère la mouvement réduit: réduire)'). Matches
   ) {
     // Exécuter des effets sympas}

Je ne suis pas sûr qu'il est préférable de tester la non-référence ou l'inverse de reduce . Quoi qu'il en soit, l'astuce dans CSS est d'envelopper tout ce que vous voulez faire avec @scroll-timeline et animation-timeline dans le test @supports (si vous voulez faire autre chose), puis enveloppez ce test dans le test des préférences:

 @Media (préfert-réduction du mouvement: sans préférence) {

    @Supports (Animation-Timeline: Works) {

      / * Exécuter des effets frais * /

    }

}

C'est une manifestation, et tout le mérite est pour Bramus, qui l'a fait.

Oh, tu sais? Si @when devient une fonctionnalité, CSS sera plus concis:

 @when supports (animation-timeline: works) et media (préfère le mouvement réduit: sans préférence) {

} @autre {

}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!