Elementor Pro 3.32 Уменьшенные предпочтения движения ⇐ Html

[Anonymous]

В Elementor 3.32 Pro конструктор теперь полностью учитывает предпочтения пользователя относительно ограниченного движения. Это означает, что эффекты движения не активируются, когда включено ограничение движения.
Я управляю школьным веб-сайтом, и из-за этого изменения все анимации и эффекты на школьных компьютерах отключаются. Это немного смешно, и, похоже, нет никакого способа включить или выключить это поведение.
Я понимаю важность специальных возможностей, но в нашем случае школьные компьютеры отключают анимацию и эффекты движения из соображений скорости и эффективности, а не из соображений доступности. В результате сайт выглядит плоским и не работает должным образом.
Можем ли мы включить или отключить эту функцию? Я придумал обходной путь, но он далек от идеала. Есть ли другое решение?

Возможное решение
(function() {
// Check if reduced motion is actually enabled
const hasReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// ONLY override if reduced motion is detected
if (hasReducedMotion) {
const originalMatchMedia = window.matchMedia;
window.matchMedia = function(query) {
if (query.includes('prefers-reduced-motion')) {
return {
matches: false,
media: query,
addEventListener: () => {},
removeEventListener: () => {},
addListener: () => {},
removeListener: () => {}
};
}
return originalMatchMedia(query);
};
}

function fixAnimations() {
// Only fix if reduced motion was detected
if (!hasReducedMotion) return;

// Fix entrance animations
document.querySelectorAll('.elementor-invisible').forEach(el => {
el.classList.remove('elementor-invisible');
});

// Fix ALL your custom flip cards
document.querySelectorAll('.timetable-card-3d, .contactinfo-card-3d, .termdates-card-3d').forEach(card => {
card.style.transition = 'transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1)';
card.style.transformStyle = 'preserve-3d';
});

// Fix Max Mega Menu immediately
document.querySelectorAll('.mega-menu, .mega-menu-wrap').forEach(menu => {
menu.style.transition = 'opacity 0.3s ease, visibility 0.3s ease';
});

// Fix Essential Addons Hotspot tooltips
document.querySelectorAll('.eael-hot-spot-tooptip, .eael-hot-spot-tooltip').forEach(tooltip => {
tooltip.style.transition = 'opacity 0.3s ease, visibility 0.3s ease';
});
}

if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => setTimeout(fixAnimations, 50));
} else {
setTimeout(fixAnimations, 50);
}

window.addEventListener('load', () => setTimeout(fixAnimations, 100));
})();

/* ONLY apply these fixes when reduced motion is detected */
@media (prefers-reduced-motion: reduce) {

/* Force ALL animations */
* {
animation-duration: inherit !important;
animation-play-state: running !important;
transition-duration: inherit !important;
}

/* Max Mega Menu - aggressive fix */
.mega-menu,
.mega-menu *,
.mega-menu-wrap,
.mega-menu-wrap *,
.mega-sub-menu {
animation-duration: 0.3s !important;
transition: opacity 0.3s ease,
visibility 0.3s ease,
transform 0.3s ease !important;
}

/* Entrance animations */
.elementor-invisible {
opacity: 0 !important;
visibility: visible !important;
}

[class*="elementor-animation-"] {
animation-duration: 0.6s !important;
}

/* Share Buttons */
.elementor-share-buttons * {
transition: all 0.3s ease !important;
animation-duration: 0.6s !important;
}

/* Essential Addons Dynamic Gallery */
.eael-filter-gallery-wrapper,
.eael-filter-gallery-wrapper *,
.eael-filterable-gallery-item,
.eael-gallery-grid-item,
.eael-fg-item-wrap {
transition: all 0.5s ease !important;
animation-duration: 0.5s !important;
}

/* Essential Addons Image Hotspots - fix tooltips */
.eael-hot-spot-tooptip,
.eael-hot-spot-tooltip,
.eael-hot-spot-tooptip-text,
.eael-tooltip,
[class*="eael-hot-spot"] [class*="tooltip"] {
transition: opacity 0.3s ease,
visibility 0.3s ease !important;
animation-duration: 0.3s !important;
}

/* Hide hotspot tooltips by default */
.eael-hot-spot-tooptip:not(:hover),
.eael-hot-spot-tooltip:not(:hover) {
opacity: 0 !important;
visibility: hidden !important;
}

/* Show on hover */
.eael-hot-spot-tooptip:hover,
.eael-hot-spot-tooltip:hover,
.eael-hot-spot:hover .eael-hot-spot-tooptip,
.eael-hot-spot:hover .eael-hot-spot-tooltip {
opacity: 1 !important;
visibility: visible !important;
}

/* Essential Addons Flip Box */
.eael-elements-flip-box-container,
.eael-flip-box-container {
perspective: 1000px !important;
}

.eael-elements-flip-box-flip-card,
.eael-flip-box,
.eael-flip-box-inner {
transition: transform 0.6s ease !important;
transform-style: preserve-3d !important;
}

.eael-elements-flip-box-front-container,
.eael-elements-flip-box-rear-container,
.eael-flip-box-front,
.eael-flip-box-back {
backface-visibility: hidden !important;
transform-style: preserve-3d !important;
transition: transform 0.6s ease !important;
}

.eael-elements-flip-box-front-container {
transform: rotateY(0deg) !important;
}

.eael-elements-flip-box-rear-container {
transform: rotateY(180deg) !important;
}

.eael-elements-flip-box-container:hover .eael-elements-flip-box-flip-card {
transform: rotateY(180deg) !important;
}

/* Custom flip cards */
.timetable-card-3d,
.contactinfo-card-3d,
.termdates-card-3d {
transition: transform 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
transform-style: preserve-3d !important;
}

.timetable-card-face,
.contactinfo-card-face,
.termdates-card-face {
backface-visibility: hidden !important;
transform-style: preserve-3d !important;
transition: transform 0.8s ease !important;
}

/* Elementor Flip Boxes (new) */
.e-flip-box {
perspective: 1000px !important;
}

.e-flip-box__layer {
transition: transform 0.6s ease !important;
transform-style: preserve-3d !important;
backface-visibility: hidden !important;
}

.e-flip-box__layer--front {
transform: rotateY(0deg) !important;
}

.e-flip-box__layer--back {
transform: rotateY(180deg) !important;
}

.e-flip-box:hover .e-flip-box__layer--front {
transform: rotateY(-180deg) !important;
}

.e-flip-box:hover .e-flip-box__layer--back {
transform: rotateY(0deg) !important;
}

/* Elementor Flip Boxes (old) */
.elementor-flip-box {
perspective: 1000px !important;
}

.elementor-flip-box__front,
.elementor-flip-box__back {
transition: transform 0.6s ease !important;
transform-style: preserve-3d !important;
backface-visibility: hidden !important;
}

.elementor-flip-box__front {
transform: rotateY(0deg) !important;
}

.elementor-flip-box__back {
transform: rotateY(180deg) !important;
}

.elementor-flip-box:hover .elementor-flip-box__front {
transform: rotateY(-180deg) !important;
}

.elementor-flip-box:hover .elementor-flip-box__back {
transform: rotateY(0deg) !important;
}
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... preference