85 lines
2.6 KiB
JavaScript
85 lines
2.6 KiB
JavaScript
// State of the animation
|
|
let animationPaused = false;
|
|
// Dictionary to keep track of animation intervals
|
|
let animationIntervals = {};
|
|
// Dictionary to keep track of delay count for each animation
|
|
let delays = {};
|
|
// Dictionary to keep track of frame for each animation
|
|
let frames = {};
|
|
// 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 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;
|
|
|
|
// start the animation
|
|
animationIntervals[id] = setInterval(updateAnimation, delay, id, framesList, framesList.length);
|
|
}
|
|
|
|
function updateAnimation(id, framesList, 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";
|
|
|
|
// 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);
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
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') {
|
|
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
|
|
toggleable.style.display = 'none';
|
|
imgTopToggleable.style.display = 'block';
|
|
Object.keys(animationIntervals).forEach(id => {
|
|
clearInterval(animationIntervals[id]);
|
|
});
|
|
}
|
|
}
|
|
|