2 changed files with 23 additions and 22 deletions
|
@ -47,7 +47,7 @@
|
|||
<body>
|
||||
|
||||
<nav role="none" aria-label="boutton activer/desactiver les animations" id="play">
|
||||
<ul aria-label="boutton activer/desactiver les animations" role="toolbar" class="toggleButton">
|
||||
<ul aria-label="bouton activer/desactiver les animations" role="toolbar" class="toggleButton">
|
||||
<li role="none">
|
||||
<pre class="toggleable" aria-hidden="true">
|
||||
|‾‾‾‾‾‾‾‾‾|
|
||||
|
|
|
@ -1,14 +1,15 @@
|
|||
async function setupPage() {
|
||||
|
||||
// Checks if the user enabled prefers-reduced-motion
|
||||
// Checks if the user enabled prefers-reduced-motion
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
// Dictionary to keep track of animation intervals
|
||||
let animationEnabled = prefersReducedMotion;
|
||||
// Dictionary to keep track of animation intervals
|
||||
let animationIntervals = {};
|
||||
// Dictionary to keep track of delay count for each animation
|
||||
// Dictionary to keep track of delay count for each animation
|
||||
let delays = {};
|
||||
// Dictionary to keep track of frame for each animation
|
||||
// Dictionary to keep track of frame for each animation
|
||||
let frames = {};
|
||||
// dictionary to keep track of frame count for each animation
|
||||
// dictionary to keep track of frame count for each animation
|
||||
let frameCounts = {};
|
||||
|
||||
const illustrationAccueil = document.getElementById('illustration-accueil');
|
||||
|
@ -16,9 +17,9 @@ async function setupPage() {
|
|||
const orsay = document.getElementById('orsay');
|
||||
const parterre = document.getElementById('parterre');
|
||||
|
||||
// Update ARIA live attributes based on prefers-reduced-motion
|
||||
function updateARIALiveAttributes() {
|
||||
if (prefersReducedMotion) {
|
||||
// Update ARIA live attributes based on prefers-reduced-motion
|
||||
function setARIALiveAttributes(isAnimated) {
|
||||
if (isAnimated) {
|
||||
illustrationAccueil.setAttribute('aria-live', 'off');
|
||||
rennes.setAttribute('aria-live', 'off');
|
||||
orsay.setAttribute('aria-live', 'off');
|
||||
|
@ -52,13 +53,11 @@ async function setupPage() {
|
|||
delays[id] = delay;
|
||||
|
||||
// Update ARIA live attributes
|
||||
updateARIALiveAttributes();
|
||||
setARIALiveAttributes(true);
|
||||
|
||||
// Start the animation if prefers-reduced-motion is not enabled
|
||||
if (!prefersReducedMotion) {
|
||||
animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
|
||||
}
|
||||
}
|
||||
|
||||
function updateAnimation(id, framesList, totalFrames) {
|
||||
|
||||
|
@ -76,10 +75,12 @@ async function setupPage() {
|
|||
}
|
||||
}
|
||||
|
||||
if (animationEnabled) {
|
||||
animate("illustration-accueil", 500);
|
||||
animate("rennes", 1000);
|
||||
animate("orsay", 2000);
|
||||
animate("parterre", 1500);
|
||||
}
|
||||
|
||||
const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
|
||||
toggleableElements.forEach(function (element) {
|
||||
|
|
Loading…
Reference in a new issue