2 changed files with 8 additions and 24 deletions
|
@ -121,7 +121,6 @@
|
|||
|
||||
<main aria-label="contenu de la page web">
|
||||
<div id="jardin">
|
||||
<button id="toggleAnimation">Pause</button>
|
||||
<div id="illustration-accueil" class="noscroll" role="img" aria-label="deux fleurs dessinées en ascii animées" tabindex="0">
|
||||
<!-- séquences de l'animation qui est lancée grâce à l'avant avant dernière ligne -->
|
||||
<pre class="center" aria-label="Animation de texte de bienvenue">
|
||||
|
|
|
@ -2,27 +2,6 @@
|
|||
let animationPaused = false;
|
||||
// Dictionary to keep track of animation intervals
|
||||
let animationIntervals = {};
|
||||
|
||||
document.getElementById('toggleAnimation').addEventListener('click', function() {
|
||||
const button = document.getElementById('toggleAnimation');
|
||||
|
||||
if (animationPaused) {
|
||||
button.textContent = 'Pause';
|
||||
animationPaused = false;
|
||||
// Play the animation
|
||||
Object.keys(animationIntervals).forEach(id => {
|
||||
animationIntervals[id] = setInterval(updateAnimation, delays[id], id, frames[id], frames[id].length);
|
||||
});
|
||||
} else {
|
||||
button.textContent = 'Play';
|
||||
animationPaused = true;
|
||||
// Pause the animation
|
||||
Object.keys(animationIntervals).forEach(id => {
|
||||
clearInterval(animationIntervals[id]);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Dictionary to keep track of delay count for each animation
|
||||
let delays = {};
|
||||
// Dictionary to keep track of frame for each animation
|
||||
|
@ -87,13 +66,19 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
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';
|
||||
} else {
|
||||
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]);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue