diff options
author | Tixie <contact@tixie.name> | 2024-06-10 11:44:52 +0200 |
---|---|---|
committer | Tixie <contact@tixie.name> | 2024-06-10 11:45:21 +0200 |
commit | 091f4ddc4a64e972e8aaa0f786c905a404fa11de (patch) | |
tree | 201f3a9575dbd79d44f00de26ac455e64f665a0b | |
parent | 31aa58a8636234350d79f1ec1ebfafa7cf57dbac (diff) | |
parent | 9ff1b202483565be36ffb82e38867046ccf35458 (diff) | |
download | site-091f4ddc4a64e972e8aaa0f786c905a404fa11de.tar.gz site-091f4ddc4a64e972e8aaa0f786c905a404fa11de.zip |
Merge branch preprod into main
-rw-r--r-- | static/script-bon.js | 91 |
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); |