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

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

Browse source
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"> <main aria-label="contenu de la page web">
<div id="jardin"> <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"> <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 --> <!-- 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"> <pre class="center" aria-label="Animation de texte de bienvenue">

31
static/script-bon.js
View file

@ -2,27 +2,6 @@
let animationPaused = false; let animationPaused = false;
// Dictionary to keep track of animation intervals // Dictionary to keep track of animation intervals
let animationIntervals = {}; 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 // Dictionary to keep track of delay count for each animation
let delays = {}; let delays = {};
// Dictionary to keep track of frame for each animation // Dictionary to keep track of frame for each animation
@ -87,13 +66,19 @@ document.addEventListener('DOMContentLoaded', function() {
function toggleAnimation() { function toggleAnimation() {
const toggleable = document.querySelector('.toggleable'); const toggleable = document.querySelector('.toggleable');
const imgTopToggleable = document.querySelector('.img_top_toggleable'); const imgTopToggleable = document.querySelector('.img_top_toggleable');
// Play the animations
if (toggleable.style.display === 'none') { if (toggleable.style.display === 'none') {
toggleable.style.display = 'block'; toggleable.style.display = 'block';
imgTopToggleable.style.display = 'none'; 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'; toggleable.style.display = 'none';
imgTopToggleable.style.display = 'block'; imgTopToggleable.style.display = 'block';
Object.keys(animationIntervals).forEach(id => {
clearInterval(animationIntervals[id]);
});
} }
} }