improved performance of the script for the loading of it and the scroll event listener
This commit is contained in:
Adrian Rosin
parent
efeeba4743
commit
013f315c50
1 changed files with 125 additions and 114 deletions
|
|
@ -1,138 +1,149 @@
|
|||
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() {
|
||||
if (prefersReducedMotion) {
|
||||
illustrationAccueil.setAttribute('aria-live', 'off');
|
||||
rennes.setAttribute('aria-live', 'off');
|
||||
orsay.setAttribute('aria-live', 'off');
|
||||
parterre.setAttribute('aria-live', 'off');
|
||||
} else {
|
||||
illustrationAccueil.setAttribute('aria-live', 'polite');
|
||||
rennes.setAttribute('aria-live', 'polite');
|
||||
orsay.setAttribute('aria-live', 'polite');
|
||||
parterre.setAttribute('aria-live', 'polite');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function animate(id, delay) {
|
||||
|
||||
// get the container and frames for the amination
|
||||
const container = document.getElementById(id);
|
||||
const framesList = container.children;
|
||||
|
||||
// set up the frame counter
|
||||
frameCounts[id] = 0;
|
||||
|
||||
// hide all frames except for the first
|
||||
framesList[0].style.display = "flex";
|
||||
for (let i = 1; i < framesList.length; i++) {
|
||||
framesList[i].style.display = "none";
|
||||
function updateARIALiveAttributes() {
|
||||
if (prefersReducedMotion) {
|
||||
illustrationAccueil.setAttribute('aria-live', 'off');
|
||||
rennes.setAttribute('aria-live', 'off');
|
||||
orsay.setAttribute('aria-live', 'off');
|
||||
parterre.setAttribute('aria-live', 'off');
|
||||
} else {
|
||||
illustrationAccueil.setAttribute('aria-live', 'polite');
|
||||
rennes.setAttribute('aria-live', 'polite');
|
||||
orsay.setAttribute('aria-live', 'polite');
|
||||
parterre.setAttribute('aria-live', 'polite');
|
||||
}
|
||||
}
|
||||
|
||||
// Stock frames and delay in dictionaries
|
||||
frames[id] = framesList;
|
||||
delays[id] = delay;
|
||||
|
||||
// Update ARIA live attributes
|
||||
updateARIALiveAttributes();
|
||||
function animate(id, delay) {
|
||||
|
||||
// Start the animation if prefers-reduced-motion is not enabled
|
||||
if (!prefersReducedMotion) {
|
||||
animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
|
||||
// get the container and frames for the amination
|
||||
const container = document.getElementById(id);
|
||||
const framesList = container.children;
|
||||
|
||||
// set up the frame counter
|
||||
frameCounts[id] = 0;
|
||||
|
||||
// hide all frames except for the first
|
||||
framesList[0].style.display = "flex";
|
||||
for (let i = 1; i < framesList.length; i++) {
|
||||
framesList[i].style.display = "none";
|
||||
}
|
||||
|
||||
// Stock frames and delay in dictionaries
|
||||
frames[id] = framesList;
|
||||
delays[id] = delay;
|
||||
|
||||
// Update ARIA live attributes
|
||||
updateARIALiveAttributes();
|
||||
|
||||
// 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) {
|
||||
function updateAnimation(id, framesList, totalFrames) {
|
||||
|
||||
// increment the frame counter for the given id
|
||||
frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
|
||||
// increment the frame counter for the given id
|
||||
frameCounts[id] = (frameCounts[id] + 1) % totalFrames;
|
||||
|
||||
// show the next frame
|
||||
framesList[frameCounts[id]].style.display = "flex";
|
||||
// show the next frame
|
||||
framesList[frameCounts[id]].style.display = "flex";
|
||||
|
||||
// hide the previous frame
|
||||
if (frameCounts[id] === 0) {
|
||||
framesList[totalFrames - 1].style.display = "none";
|
||||
} else {
|
||||
framesList[frameCounts[id] - 1].style.display = "none";
|
||||
// hide the previous frame
|
||||
if (frameCounts[id] === 0) {
|
||||
framesList[totalFrames - 1].style.display = "none";
|
||||
} 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() {
|
||||
toggleAnimation();
|
||||
const toggleableElements = document.querySelectorAll('.toggleable, .img_top_toggleable');
|
||||
toggleableElements.forEach(function (element) {
|
||||
element.addEventListener('click', function () {
|
||||
toggleAnimation();
|
||||
});
|
||||
});
|
||||
|
||||
function toggleAnimation() {
|
||||
const toggleable = document.querySelector('.toggleable');
|
||||
const imgTopToggleable = document.querySelector('.img_top_toggleable');
|
||||
// Play the animations
|
||||
if (toggleable.style.display === 'none') {
|
||||
illustrationAccueil.setAttribute('aria-live', 'polite');
|
||||
rennes.setAttribute('aria-live', 'polite');
|
||||
orsay.setAttribute('aria-live', 'polite');
|
||||
parterre.setAttribute('aria-live', 'polite');
|
||||
toggleable.style.display = 'block';
|
||||
imgTopToggleable.style.display = 'none';
|
||||
Object.keys(animationIntervals).forEach(id => {
|
||||
animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
|
||||
});
|
||||
} else { // Pause the animations
|
||||
illustrationAccueil.setAttribute('aria-live', 'off');
|
||||
rennes.setAttribute('aria-live', 'off');
|
||||
orsay.setAttribute('aria-live', 'off');
|
||||
parterre.setAttribute('aria-live', 'off');
|
||||
toggleable.style.display = 'none';
|
||||
imgTopToggleable.style.display = 'block';
|
||||
Object.keys(animationIntervals).forEach(id => {
|
||||
clearInterval(animationIntervals[id]);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
let lastScrollTop = 0;
|
||||
let isScrolling = false;
|
||||
|
||||
window.addEventListener("scroll", function() {
|
||||
if (!isScrolling) {
|
||||
window.requestAnimationFrame(function() {
|
||||
let currentPosition = window.scrollY || document.documentElement.scrollTop;
|
||||
const toggleButton = document.querySelectorAll('.toggleButton');
|
||||
|
||||
if (currentPosition > lastScrollTop) {
|
||||
// Scroll down
|
||||
toggleButton.forEach(button => {
|
||||
button.style.display = "none";
|
||||
});
|
||||
} else {
|
||||
// Scroll up
|
||||
toggleButton.forEach(button => {
|
||||
button.style.display = "block";
|
||||
});
|
||||
}
|
||||
|
||||
lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
|
||||
isScrolling = false;
|
||||
});
|
||||
|
||||
isScrolling = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function toggleAnimation() {
|
||||
const toggleable = document.querySelector('.toggleable');
|
||||
const imgTopToggleable = document.querySelector('.img_top_toggleable');
|
||||
// Play the animations
|
||||
if (toggleable.style.display === 'none') {
|
||||
illustrationAccueil.setAttribute('aria-live', 'polite');
|
||||
rennes.setAttribute('aria-live', 'polite');
|
||||
orsay.setAttribute('aria-live', 'polite');
|
||||
parterre.setAttribute('aria-live', 'polite');
|
||||
toggleable.style.display = 'block';
|
||||
imgTopToggleable.style.display = 'none';
|
||||
Object.keys(animationIntervals).forEach(id => {
|
||||
animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
|
||||
});
|
||||
} else { // Pause the animations
|
||||
illustrationAccueil.setAttribute('aria-live', 'off');
|
||||
rennes.setAttribute('aria-live', 'off');
|
||||
orsay.setAttribute('aria-live', 'off');
|
||||
parterre.setAttribute('aria-live', 'off');
|
||||
toggleable.style.display = 'none';
|
||||
imgTopToggleable.style.display = 'block';
|
||||
Object.keys(animationIntervals).forEach(id => {
|
||||
clearInterval(animationIntervals[id]);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
let lastScrollTop = 0; // Last position of the scroll
|
||||
|
||||
window.addEventListener("scroll", function() {
|
||||
let currentPosition = window.pageYOffset || document.documentElement.scrollTop;
|
||||
const toggleButton = document.querySelectorAll('.toggleButton');
|
||||
|
||||
if (currentPosition > lastScrollTop) {
|
||||
// Scroll down
|
||||
toggleButton.forEach(button => {
|
||||
button.style.display = "none";
|
||||
});
|
||||
} else {
|
||||
// Scroll up
|
||||
toggleButton.forEach(button => {
|
||||
button.style.display = "block";
|
||||
});
|
||||
}
|
||||
lastScrollTop = currentPosition <= 0 ? 0 : currentPosition; // For Mobile or negative scrolling
|
||||
}, false);
|
||||
|
||||
// Loads the script once the document is ready
|
||||
document.addEventListener('DOMContentLoaded', setupPage);
|
||||
|
|
|
|||
Loading…
Reference in a new issue