Spaces:
Running
Running
Add 1 files
Browse files- index.html +29 -18
index.html
CHANGED
@@ -463,36 +463,52 @@
|
|
463 |
const orbits = document.querySelectorAll('.orbit');
|
464 |
|
465 |
// Store base animation durations
|
466 |
-
const baseDurations = {
|
467 |
-
|
468 |
-
|
469 |
-
|
470 |
-
|
|
|
|
|
|
|
|
|
|
|
471 |
|
472 |
// Animation control
|
473 |
let isPlaying = true;
|
474 |
let speedFactor = 1;
|
475 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
476 |
// Play/pause functionality
|
477 |
playBtn.addEventListener('click', function() {
|
478 |
if (!isPlaying) {
|
479 |
-
orbits.forEach(orbit => {
|
480 |
-
orbit.style.animationPlayState = 'running';
|
481 |
-
});
|
482 |
isPlaying = true;
|
483 |
playBtn.classList.add('active');
|
484 |
pauseBtn.classList.remove('active');
|
|
|
485 |
}
|
486 |
});
|
487 |
|
488 |
pauseBtn.addEventListener('click', function() {
|
489 |
if (isPlaying) {
|
490 |
-
orbits.forEach(orbit => {
|
491 |
-
orbit.style.animationPlayState = 'paused';
|
492 |
-
});
|
493 |
isPlaying = false;
|
494 |
pauseBtn.classList.add('active');
|
495 |
playBtn.classList.remove('active');
|
|
|
496 |
}
|
497 |
});
|
498 |
|
@@ -500,12 +516,7 @@
|
|
500 |
speedControl.addEventListener('input', function() {
|
501 |
speedFactor = parseFloat(this.value);
|
502 |
speedValue.textContent = `${speedFactor.toFixed(1)}x`;
|
503 |
-
|
504 |
-
orbits.forEach(orbit => {
|
505 |
-
const orbitClass = orbit.className.split(' ')[0];
|
506 |
-
const baseDuration = baseDurations[orbitClass];
|
507 |
-
orbit.style.animationDuration = `${baseDuration / speedFactor}s`;
|
508 |
-
});
|
509 |
});
|
510 |
|
511 |
// Toggle labels
|
@@ -552,5 +563,5 @@
|
|
552 |
updateLabelPositions();
|
553 |
});
|
554 |
</script>
|
555 |
-
|
556 |
</html>
|
|
|
463 |
const orbits = document.querySelectorAll('.orbit');
|
464 |
|
465 |
// Store base animation durations
|
466 |
+
const baseDurations = {
|
467 |
+
'mercury-orbit': 4,
|
468 |
+
'venus-orbit': 10,
|
469 |
+
'earth-orbit': 15,
|
470 |
+
'mars-orbit': 28,
|
471 |
+
'jupiter-orbit': 95,
|
472 |
+
'saturn-orbit': 230,
|
473 |
+
'uranus-orbit': 680,
|
474 |
+
'neptune-orbit': 1330
|
475 |
+
};
|
476 |
|
477 |
// Animation control
|
478 |
let isPlaying = true;
|
479 |
let speedFactor = 1;
|
480 |
|
481 |
+
// Function to update animations based on speed
|
482 |
+
function updateAnimations() {
|
483 |
+
orbits.forEach(orbit => {
|
484 |
+
const orbitClass = Array.from(orbit.classList).find(cls => cls.endsWith('-orbit'));
|
485 |
+
if (orbitClass) {
|
486 |
+
const baseDuration = baseDurations[orbitClass];
|
487 |
+
orbit.style.animationDuration = `${baseDuration / speedFactor}s`;
|
488 |
+
orbit.style.animationPlayState = isPlaying ? 'running' : 'paused';
|
489 |
+
}
|
490 |
+
});
|
491 |
+
}
|
492 |
+
|
493 |
+
// Initialize animations
|
494 |
+
updateAnimations();
|
495 |
+
|
496 |
// Play/pause functionality
|
497 |
playBtn.addEventListener('click', function() {
|
498 |
if (!isPlaying) {
|
|
|
|
|
|
|
499 |
isPlaying = true;
|
500 |
playBtn.classList.add('active');
|
501 |
pauseBtn.classList.remove('active');
|
502 |
+
updateAnimations();
|
503 |
}
|
504 |
});
|
505 |
|
506 |
pauseBtn.addEventListener('click', function() {
|
507 |
if (isPlaying) {
|
|
|
|
|
|
|
508 |
isPlaying = false;
|
509 |
pauseBtn.classList.add('active');
|
510 |
playBtn.classList.remove('active');
|
511 |
+
updateAnimations();
|
512 |
}
|
513 |
});
|
514 |
|
|
|
516 |
speedControl.addEventListener('input', function() {
|
517 |
speedFactor = parseFloat(this.value);
|
518 |
speedValue.textContent = `${speedFactor.toFixed(1)}x`;
|
519 |
+
updateAnimations();
|
|
|
|
|
|
|
|
|
|
|
520 |
});
|
521 |
|
522 |
// Toggle labels
|
|
|
563 |
updateLabelPositions();
|
564 |
});
|
565 |
</script>
|
566 |
+
</body>
|
567 |
</html>
|