From 351931fdeb15efcc2c24710e7f0a12a16f2c9afe Mon Sep 17 00:00:00 2001
From: Tixie <contact@tixie.name>
Date: Mon, 10 Jun 2024 11:30:14 +0200
Subject: =?UTF-8?q?Ralentir=20les=20animations=20ASCII=20si=20la=20media?=
 =?UTF-8?q?=20feature=20prefers-reduced-motion=20is=20activ=C3=A9e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/script-bon.js | 91 +++++++++++++++++++++++++++-------------------------
 1 file changed, 47 insertions(+), 44 deletions(-)

(limited to 'static/script-bon.js')

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);
-- 
cgit v1.2.3