aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorTixie <tixie@noreply.localhost>2024-06-10 09:43:37 +0000
committerTixie <tixie@noreply.localhost>2024-06-10 09:43:37 +0000
commit9ff1b202483565be36ffb82e38867046ccf35458 (patch)
tree201f3a9575dbd79d44f00de26ac455e64f665a0b
parent4978b26ef612d2e23ebcc9fff628890a160adebd (diff)
parent351931fdeb15efcc2c24710e7f0a12a16f2c9afe (diff)
downloadsite-9ff1b202483565be36ffb82e38867046ccf35458.tar.gz
site-9ff1b202483565be36ffb82e38867046ccf35458.zip
Merge pull request 'Ralentir les animations ASCII si on détecte que l'utilisateur'trice a demandé au système de minimiser la quantité d'animation ou de mouvement.' (#44) from feat/a11y into preprod
Reviewed-on: https://git.deuxfleurs.fr/Deuxfleurs/site/pulls/44
-rw-r--r--static/script-bon.js91
1 files changed, 47 insertions, 44 deletions
diff --git a/static/script-bon.js b/static/script-bon.js
index 5458968..af03d36 100644
--- a/static/script-bon.js
+++ b/static/script-bon.js
@@ -1,44 +1,47 @@
-// dictionary to keep track of frame count for each animation
-let frameCounts = {};
-
-function animate(id, delay) {
-
- // get the container and frames for the amination
- const container = document.getElementById(id);
- const frames = container.children;
-
- // set up the frame counter
- frameCounts[id] = 0;
-
- // hide all frames except for the first
- frames[0].style.display = "flex";
- for (let i = 1; i < frames.length; i++) {
- frames[i].style.display = "none";
- }
-
- // start the animation
- const interval = setInterval(updateAnimation, delay, id, frames, frames.length);
-
-}
-
-function updateAnimation(id, frames, totalFrames) {
-
- // increment the frame counter for the given id
- frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
-
- // show the next frame
- frames[frameCounts[id]].style.display = "flex";
-
- // hide the previous frame
- if (frameCounts[id] == 0) {
- frames[totalFrames - 1].style.display = "none";
- } else {
- frames[frameCounts[id] - 1].style.display = "none";
- }
-
-}
-
-animate("illustration-accueil", 500);
-animate("rennes", 1000);
-animate("orsay", 2000);
-animate("parterre", 1500); \ No newline at end of file
+// dictionary to keep track of frame count for each animation
+let frameCounts = {};
+
+function animate(id, delay) {
+
+ // get the container and frames for the amination
+ const container = document.getElementById(id);
+ const frames = container.children;
+
+ // set up the frame counter
+ frameCounts[id] = 0;
+
+ // hide all frames except for the first
+ frames[0].style.display = "flex";
+ for (let i = 1; i < frames.length; i++) {
+ frames[i].style.display = "none";
+ }
+
+ // start the animation
+ const interval = setInterval(updateAnimation, delay, id, frames, frames.length);
+
+}
+
+function updateAnimation(id, frames, totalFrames) {
+
+ // increment the frame counter for the given id
+ frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
+
+ // show the next frame
+ frames[frameCounts[id]].style.display = "flex";
+
+ // hide the previous frame
+ if (frameCounts[id] == 0) {
+ frames[totalFrames - 1].style.display = "none";
+ } else {
+ frames[frameCounts[id] - 1].style.display = "none";
+ }
+
+}
+
+// If the user have a setting on their device to minimize the amount of non-essential motion
+const preferReduceMotion = window.matchMedia("(prefers-reduced-motion)").matches;
+
+animate("illustration-accueil", preferReduceMotion ? 1500 : 500); // Reduce framerate if use preference is to reduce motion
+animate("rennes", preferReduceMotion ? 3000 : 1000); // Reduce framerate if use preference is to reduce motion
+animate("orsay", preferReduceMotion ? 4000 : 2000); // Reduce framerate if use preference is to reduce motion
+animate("parterre", 1500);