Conversation
supportDoes the plugin respect the prefers-reduced-motion if set by the browser?
It’s not implemented. I haven’t received a request for this feature yet.
I think it would be a nice addition: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion In the meantime, as a workaround, I have added this to the <head> of the site to override: <script> (function ($) { // Check for reduced motion preference if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { // 1. Store a reference to the original jQuery prototype object const originalFn = $.fn; // 2. Replace $.fn with a Proxy object // The Proxy intercepts attempts to define new properties (like .jSnow) $.fn = new Proxy(originalFn, { // Intercept attempts to 'set' a property on $.fn set: function(target, prop, value) { // Check if the property being set is the one we want to block if (prop === 'jSnow') { console.warn( Blocked definition of $.fn.${prop} due to prefers-reduced-motion. ); // We return true (success) without actually defining the property, // effectively discarding the jSnow function definition. return true; } // For all other properties, execute the original set operation return Reflect.set(target, prop, value); } }); console.log("jQuery.fn is now guarded against jSnow definition."); // Note: The original $.fn is still accessible via the 'target' inside the Proxy, // so other plugins should still be able to define functions correctly. } })(jQuery); </script> Tested on Firefox and Chromium on Ubuntu and works well. Yours, Neil
Thanks Neil for the tip. Maybe I can add this to settings if the site owner prefers to activate this feature for visitors or not.
It’s not implemented. I haven’t received a request for this feature yet.
I think it would be a nice addition: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion In the meantime, as a workaround, I have added this to the <head> of the site to override: <script> (function ($) { // Check for reduced motion preference if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { // 1. Store a reference to the original jQuery prototype object const originalFn = $.fn; // 2. Replace $.fn with a Proxy object // The Proxy intercepts attempts to define new properties (like .jSnow) $.fn = new Proxy(originalFn, { // Intercept attempts to 'set' a property on $.fn set: function(target, prop, value) { // Check if the property being set is the one we want to block if (prop === 'jSnow') { console.warn( Blocked definition of $.fn.${prop} due to prefers-reduced-motion. ); // We return true (success) without actually defining the property, // effectively discarding the jSnow function definition. return true; } // For all other properties, execute the original set operation return Reflect.set(target, prop, value); } }); console.log("jQuery.fn is now guarded against jSnow definition."); // Note: The original $.fn is still accessible via the 'target' inside the Proxy, // so other plugins should still be able to define functions correctly. } })(jQuery); </script> Tested on Firefox and Chromium on Ubuntu and works well. Yours, Neil
Thanks Neil for the tip. Maybe I can add this to settings if the site owner prefers to activate this feature for visitors or not.