Deuxfleurs
/
site
21
2
Fork 5
Code Issues 9 Pull Requests 6 Releases Wiki Activity

added pause/play button which pauses/plays the animations as a nav

This commit is contained in:
Adrian Rosin 2024-01-31 09:26:29 +01:00
parent a396d36509
commit 06a73e6b10
2 changed files with 8 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/index.html
View File

@ -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">

31
static/script-bon.js
View File

@ -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]);
});
}
}