Respect "Reduce Motion" Across the Whole Site
Turns off CSS animations, transitions, parallax backgrounds and smooth scrolling for visitors whose device is set to reduce motion. Visitors without that setting see no change.
Opens WPIDE on
Code
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
html {
scroll-behavior: auto !important;
}
[style*="background-attachment: fixed"],
.has-parallax,
.wp-block-cover.has-parallax {
background-attachment: scroll !important;
}
}Notes
Add selectors for slider or animation libraries your theme uses if they animate with JavaScript instead of CSS.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.