Deuxfleurs/site
20
2
Fork 6
Code Issues 4 Pull requests 7 Releases Wiki Activity

improved performance of the script for the loading of it and the scroll event listener

Browse source
This commit is contained in:
Adrian Rosin 2024-02-07 09:52:32 +01:00
parent efeeba4743
commit 013f315c50
1 changed files with 125 additions and 114 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
static/script-bon.js
View file

@ -1,22 +1,23 @@
async function setupPage() {
// Checks if the user enabled prefers-reduced-motion
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Dictionary to keep track of animation intervals
let animationIntervals = {};
let animationIntervals = {};
// Dictionary to keep track of delay count for each animation
let delays = {};
let delays = {};
// Dictionary to keep track of frame for each animation
let frames = {};
let frames = {};
// dictionary to keep track of frame count for each animation
let frameCounts = {};
let frameCounts = {};
const illustrationAccueil = document.getElementById('illustration-accueil');
const rennes = document.getElementById('rennes');
const orsay = document.getElementById('orsay');
const parterre = document.getElementById('parterre');
const illustrationAccueil = document.getElementById('illustration-accueil');
const rennes = document.getElementById('rennes');
const orsay = document.getElementById('orsay');
const parterre = document.getElementById('parterre');
// Update ARIA live attributes based on prefers-reduced-motion
function updateARIALiveAttributes() {
function updateARIALiveAttributes() {
if (prefersReducedMotion) {
illustrationAccueil.setAttribute('aria-live', 'off');
rennes.setAttribute('aria-live', 'off');
@ -28,10 +29,10 @@ function updateARIALiveAttributes() {
orsay.setAttribute('aria-live', 'polite');
parterre.setAttribute('aria-live', 'polite');
}
}
}
function animate(id, delay) {
function animate(id, delay) {
// get the container and frames for the amination
const container = document.getElementById(id);
@ -57,9 +58,9 @@ function animate(id, delay) {
if (!prefersReducedMotion) {
animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
}
}
}
function updateAnimation(id, framesList, totalFrames) {
function updateAnimation(id, framesList, totalFrames) {
// increment the frame counter for the given id
frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
@ -73,23 +74,21 @@ function updateAnimation(id, framesList, totalFrames) {
} else {
framesList[frameCounts[id] - 1].style.display = "none";
}
}
}
animate("illustration-accueil", 500);
animate("rennes", 1000);
animate("orsay", 2000);
animate("parterre", 1500);
animate("illustration-accueil", 500);
animate("rennes", 1000);
animate("orsay", 2000);
animate("parterre", 1500);
document.addEventListener('DOMContentLoaded', function() {
const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
toggleableElements.forEach(function(element) {
element.addEventListener('click', function() {
toggleableElements.forEach(function (element) {
element.addEventListener('click', function () {
toggleAnimation();
});
});
});
function toggleAnimation() {
function toggleAnimation() {
const toggleable = document.querySelector('.toggleable');
const imgTopToggleable = document.querySelector('.img_top_toggleable');
// Play the animations
@ -114,12 +113,15 @@ function toggleAnimation() {
clearInterval(animationIntervals[id]);
});
}
}
}
let lastScrollTop = 0; // Last position of the scroll
let lastScrollTop = 0;
let isScrolling = false;
window.addEventListener("scroll", function() {
let currentPosition = window.pageYOffset || document.documentElement.scrollTop;
window.addEventListener("scroll", function() {
if (!isScrolling) {
window.requestAnimationFrame(function() {
let currentPosition = window.scrollY || document.documentElement.scrollTop;
const toggleButton = document.querySelectorAll('.toggleButton');
if (currentPosition > lastScrollTop) {
@ -133,6 +135,15 @@ window.addEventListener("scroll", function() {
button.style.display = "block";
});
}
lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
}, false);
lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
isScrolling = false;
});
isScrolling = true;
}
});
}
// Loads the script once the document is ready
document.addEventListener('DOMContentLoaded', setupPage);